Браузер Internet Explorer 6 (IE6) содержит большое количество ошибок при работе с CSS и, несмотря на это, окончательно еще не сошел в утиль. Ошибки порой совершенно нелогичны и для их преодоления браузеру требуется «подкладывать» персональный стиль. Поэтому для разработчиков, которые по тем или иным причинам верстают под IE6 нужно знать, как это сделать. Способов несколько и они различаются подходом, а также насколько соответствуют спецификации CSS.
При добавлении !important к значению стилевого свойства его важность повышается. Если переопределить значение того же свойства без !important, оно будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.
Пример
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Хаки</title>
<style type="text/css">
.hack {
background: orange !important; /* Оранжевый цвет */
background: green; /* Зеленый цвет */
padding: 10px; color: #fff;
}
</style>
</head>
<body>
<div class="hack">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div>
</body>
</html>
В данном примере IE6 цвет фона блока покажет зеленым, остальные браузеры — оранжевым.
Если перед стилевым свойством добавить символ подчеркивания (_) или дефис (-), то оно будет пониматься только браузером Internet Explorer до 6 версии включительно. Этот хак приводит к невалидному коду CSS.
Пример 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Хаки</title>
<style type="text/css">
.hack {
background: orange; /* Оранжевый цвет */
_background: green; /* Зеленый цвет */
color: #fff; padding: 10px;
}
</style>
</head>
<body>
<div class="hack">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat.
</div>
</body>
</html>
В данном примере в браузере Internet Explorer 6 цвет фона блока будет зеленым, в остальных браузерах — оранжевым.
Для обозначения любого элемента в CSS используется символ звездочки (*), который называется универсальным селектором. Его понимают все браузеры, но вот сочетание * HTML — только один Internet Explorer до 6 версии включительно. Добавляя эту комбинацию перед селектором, получим стиль, который работает только в одном браузере.
Пример 3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Хаки</title>
<style type="text/css">
* HTML DIV P {
color: olive; /* Для IE6 */
}
DIV P {
color: red; /* Для остальных браузеров */
}
</style>
</head>
<body>
<div><p>Lorem ipsum dolor sit amet...</p></div>
</body>
</html>
В данном примере в браузере Internet Explorer версии 6 и ниже текст отображается оливковым цветом, а в остальных браузерах — красным.
Также для изменения стиля только под Internet Explorer применяются условные комментарии, о которых речь пойдет в другой статье.
Сайт