CSS хаки для ИЕ
В этой статье я собрал и продолжаю собирать хаки, которые помогают добиться приемлемого отображения в ИЕ браузерах. Все хаки перед публикацией проходят проверку на работоспособность. Если Вы заметите какое-либо несоответствие, оставляйте комментарий.
1. Подключение отдельного стилевого файла для ИЕ:
В атрибуте href указывается путь до файла со стилями и название самого файла. Код размещается между тегами head
<!--[if IE 7]><link href="/ie7.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями только для ИЕ 7
<!--[if IE 8]><link href="/ie7.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями только для ИЕ 8
<!--[if IE 9]><link href="/ie7.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями только для ИЕ 8
<!--[if lte IE 7]><link href="/ie7.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями для ИЕ версии 7 и ниже
<!--[if lte IE 8]><link href="/ie7.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями для ИЕ версии 8 и ниже
<!--[if lte IE 9]><link href="/ie7.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями для ИЕ версии 9 и ниже
<!--[if IE]><link href="/ie7.css" rel="stylesheet" type="text/css" /><![endif]--> //подключение файла со стилями для всех версий ИЕ
Если по каким либо причинам нет возможности подключить дополнительный файл стилей, то можно воспользоваться следующими хаками:
Только для ИЕ 7
Обе записи устанавливают верхний отступ 100px для блока с классом block
.block {
//margin-top:100px;
}
/*или*/
.block {
*margin-top:100px;
}
Только для ИЕ 8 и 9
Запись устанавливает верхний отступ 100px для блока с классом block в ИЕ 8 и 9
.block {
margin-top:100px\0/;
}
Только для ИЕ 9
Эту запись поймет только ИЕ 9
:root .block {
margin-top:100px\0/;
}
Только для ИЕ 8
Что бы изменения были видны только в ИЕ 8, сначала используется общий хак для ИЕ 8 и 9, а затем для ИЕ 9 переопределяем значение. В приведенном примере отступ 100px для блока с классом block отобразится только в ИЕ 8.
.block {
margin-top:100px\0/;
}
:root .block {
margin-top:0\0/;
}
Назначение специального класса
Отличный вариант назначить правила для определенной версии ИЕ, объявить для нужной версии (или версий) специальный класс. Между тегами head вставляем строку вида:
<!--[if IE 7]> <html class="ie7" lang="en"> <![endif]--> //объявляем класс ie7 для 7 версии ИЕ
<!--[if IE 8]> <html class="ie8" lang="en"> <![endif]--> //объявляем класс ie8 для 8 версии ИЕ
<!--[if IE 9]> <html class="ie9" lang="en"> <![endif]--> //объявляем класс ie9 для 9 версии ИЕ
<!--[if lte IE 9]> <html class="ie9_all" lang="en"> <![endif]--> //объявляем класс ie9_all для 9 и ниже версий ИЕ
<!--[if lte IE 8]> <html class="ie8_all" lang="en"> <![endif]--> //объявляем класс ie8_all для 8 и ниже версий ИЕ
<!--[if lte IE 7]> <html class="ie7_all" lang="en"> <![endif]--> //объявляем класс ie7_all для 7 и ниже версий ИЕ
После чего в таблице стилей задаем стили для нужного браузера:
//блоку с классом block в ИЕ 7 будет добавлен верхний отступ 100px
.ie7 .block {
margin-top:100px;
}
//блоку с классом block в ИЕ 7 и 8 будет добавлен верхний отступ 100px
.ie8_all .block {
margin-top:100px;
}
