В Internet Explorer 7 (IE7) по сравнению с предыдущей версией было исправлено большое количество ошибок. Однако появились новые ошибки, которые также требуют написание отдельного кода под эту версию браузера. Далее представлены хаки для седьмой версии браузера Internet Explorer.
В седьмой версии была исправлена ошибка с !important, но появилась новая. Если после свойства через пробел добавить восклицательный знак и любой набор символов, то стилевое свойство будет корректно воспринято вместо игнорирования. Обычно применяют запись !ie и все браузеры кроме IE6 и IE7 пропускают такой стиль. Учтите, что хак приводит к невалидному коду CSS.
Пример 1
<!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 в том, что IE7 разрешает в записи недопустимые символы. Конструкцию !!important все браузеры проигнорируют, но IE6 и IE7 воспринимает ее как корректную. Использование подобной записи приводит к невалидному 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 !!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
<!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 добавляемая перед именем селектора работает только для браузера Internet Explorer 7. Плюс в том, что она соответствует спецификации CSS.
Пример 4
<!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. В остальных браузерах цвет фона будет оранжевым.
Сайт