CSS background-цвет фона таблицы td, неправильно отображаемый в Internet Explorer 6

StackOverflow https://stackoverflow.com/questions/2014353

Вопрос

У меня есть несколько довольно простых HTML и CSS, которые не работают в Internet Explorer 6.

<!DOCTYPE HTML>
<html>
    <head>
        <style>        
            table td.one.read {background-color:#FFD700;}
            table td.two.read {background-color:#0000ff;}
            table td.three.read {background-color:#ff8c00;}
        </style>
    </head>

    <body>
        <table>
            <tr class="head">
                <td></td>
                <td class='one read'>one</td>
                <td class='two read'>two</td>
                <td class='three read'>three</td>
            </tr>

            <tr>
                <td>Legend</td>
                <td class='one read'>1</td>
                <td class='two read'>2</td>
                <td class='three read'>3</td>
            </tr>
        </table>
    </body>
</html>

Простая таблица, которая имеет разные цвета фона для каждого столбца.Я удалил кучу других CSS / HTML, чтобы упростить задачу.Проблема в том, что все столбцы отображаются одинаковым оранжевым цветом в Internet Explorer 6, отлично работает в Firefox.

Как я могу заставить это работать?

Это было полезно?

Решение

Это ошибка в IE6.

Если у вас есть CSS-селектор с несколькими именами классов (например, .three.read), IE6 будет игнорировать все имена классов, кроме последнего.

Следовательно, IE6 видит три CSS-правила для селектора table td.read.

Чтобы решить эту проблему, вы можете объединить свои занятия.(например,, <td class='OneRead'> и table td.OneRead {background-color:#FFD700;})

Другие советы

Несколько классов не поддерживаются в IE6, придется подождать еще несколько лет, прежде чем IE6 умрет.Однако на данный момент вы можете создавать отдельные классы для цветов.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top