CSS background-цвет фона таблицы td, неправильно отображаемый в Internet Explorer 6
-
19-09-2019 - |
Вопрос
У меня есть несколько довольно простых 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 умрет.Однако на данный момент вы можете создавать отдельные классы для цветов.