Хаки для IE7
В Internet Explorer 7 (IE7) по сравнению с предыдущей версией было исправлено большое количество ошибок. Однако появились новые ошибки, которые также требуют написание отдельного кода под эту версию браузера. Далее представлены хаки для седьмой версии браузера Internet Explorer.
Использование !ie
В седьмой версии была исправлена ошибка с !important, но появилась новая. Если после свойства через пробел добавить восклицательный знак и любой набор символов, то стилевое свойство будет корректно воспринято вместо игнорирования. Обычно применяют запись !ie и все браузеры кроме IE6 и IE7 пропускают такой стиль. Учтите, что хак приводит к невалидному коду CSS.
Пример 1
XHTML 1.0CSS 2.1IE 6IE 7IE 8+CrOpSaFx
<!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 !ie; /* Зеленый цвет */
padding: 10px; color: #fff;
}
</style>
</head>
<body>
<div class="hack">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt.</div>
</body>
</html>В данном примере IE6 и IE7 цвет фона блока покажет зеленым, остальные браузеры — оранжевым.
Использование !!important
Другая проблема связанная с !important в том, что IE7 разрешает в записи недопустимые символы. Конструкцию !!important все браузеры проигнорируют, но IE6 и IE7 воспринимает ее как корректную. Использование подобной записи приводит к невалидному CSS.
Пример 2
XHTML 1.0CSS 2.1IE 6IE 7IE 8+CrOpSaFx
<!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 !!important; /* Зеленый цвет */
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>В данном примере в браузере IE6 и IE7 цвет фона блока будет зеленым, в остальных браузерах — оранжевым.
Звездочка перед именем селектора
Добавление символа звездочки (*) перед именем стилевого свойства противоречит спецификации CSS, но понимается браузером Internet Explorer до версии 7.0 включительно. Соответственно, свойства со звездочкой впереди будут работать только в этом семействе браузеров.
Пример 3
XHTML 1.0CSS 2.1IE 6IE 7IE 8+CrOpSaFx
<!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; /* Зеленый цвет (для браузера IE7 и ниже) */
color: #fff; padding: 10px;
}
</style>
</head>
<body>
<div class="hack">Lorem ipsum dolor sit amet...</div>
</body>
</html>В данном примере зеленый цвет фона у блока будет установлен только для браузера Internet Explorer версии 7.0 и ниже. В остальных браузерах цвет фона будет оранжевым.
Конструкция *:first-child+html
Конструкция *:first-child+html добавляемая перед именем селектора работает только для браузера Internet Explorer 7. Плюс в том, что она соответствует спецификации CSS.
Пример 4
XHTML 1.0CSS 2.1IE 6IE 7IE 8+CrOpSaFx
<!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">
*:first-child+html .hack {
background: green; /* Зеленый цвет */
}
.hack {
background: orange; /* Оранжевый цвет */
color: #fff; padding: 10px;
}
</style>
</head>
<body>
<div class="hack">Lorem ipsum dolor sit amet...</div>
</body>
</html>В данном примере зеленый цвет фона у блока будет установлен только для IE7. В остальных браузерах цвет фона будет оранжевым.