HTML и CSS хаки для ИЕ

HTML и CSS хаки для ИЕ

HTML и CSS хаки для ИЕ

» » Сообщение:

HTML хаки для ИЕ

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]--> //подключение файла со стилями для всех версий ИЕ

Назначение специального класса

Отличный вариант назначить правила для определенной версии ИЕ, объявить для нужной версии (или версий) специальный класс. Между тегами 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;
}

CSS Хаки

Только для ИЕ 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/;
}
html и css хаки для ие



Похожие темыКомментарии ПросмотрыПоследнее сообщение
0619Tiny MCE и html код <code>, И...
Сообщение от: Admin
01218Доработка мода Enable HTML - убирае...
Сообщение от: Admin
0394Вывод html только для определенной ...
Сообщение от: Admin
0817Мнемоники и кодовые представления с...
Сообщение от: Admin
0847Инструкции по установке мода Enable...
Сообщение от: Admin