CSS для разных IE в общей таблице стилей

26 05/10
20

Если вы используете условные комментарии для IE и вам не хотелось бы подключать несколько файлов, есть простой способ, позволяющий использовать одну таблицу стилей, в т.ч. для разных версий IE.

Вместо того, чтобы подключать дополнительные таблицы стилей, необходимо с помощью условных комментариев обернуть все содержимое body в блок с соответствующим id для каждой версии.

1
2
3
4
5
6
7
8
9
10
11

<!--[if IE 6]>
<div id="ie6">
<![endif]-->
    <div id="wrap">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
<!--[if IE 6]>
</div>
<![endif]-->

Теперь, чтобы например переопределить какое-либо свойство для IE6, нужно добавить в селектор #ie6.

1
2

#wrap { … } /* Общее правило */ 
#ie6 #wrap { … } /* Правило для IE6 */
Теги: • •

Условные комментарии для IE

13 10/07
39

Условные комментарии используются для написания специальных инструкций которые будут работать только в Internet Explorer не ниже 5-ой версии.

Условный комментарий выглядит следующим образом:

<!­­--[if IE]> Специальные инструкции для IE здесь. <![endif]-->

Структура похожа на обычный комментарий в HTML, поэтому остальные браузеры будут воспринимать его как обычный комментарий. Explorer распознаёт специальный синтаксис <!--[if IE]>, решает условие if и парсит содержимое условного комментария так, как если бы это было содержание нормальной страницы. Условные комментарии используют синтаксис HTML комментариев, поэтому они могут быть включены только в HTML страницу. Удобно бывает сделать отдельные стили для IE и вставить тег link в условный комментарий.

Ниже написаны несколько условных комментариев, которые показывают версию Internet Explorer, которую вы используете.

<!--[if IE]> Инструкции для Internet Explorer <![endif]-->
<!--[if IE 5]> Инструкции для IE 5 <![endif]-->
<!--[if IE 5.0]> Инструкции для IE 5.0 <![endif]-->
<!--[if IE 5.5]> Инструкции для IE 5.5 <![endif]-->
<!--[if IE 6]> Инструкции для IE 6 <![endif]-->
<!--[if IE 7]> Инструкции для IE 7 <![endif]-->

В условных комментариях можно использовать операторы, с помощью которых можно задать более комплексное условие. В таблице ниже приведены все операторы.

Оператор Описание
lt меньше чем
lte меньше или равно
gt больше чем
gte больше или равно

И несколько примеров:

<!--[if ! IE 5]> Инструкции для  IE 5.5, 6 или 7 <![endif]-->
<!--[if gt IE 5.0]> Инструкции для IE 5.5, 6 или 7 <![endif]-->
<!--[if lte IE 5.5]> Инструкции для IE 5.0 или 5.5 <![endif]-->
<!--[if gte IE 6]> Инструкции для IE 6 или 7 <![endif]-->
<!--[if lt IE 7]> Инструкции для IE 5.0, 5.5 или 6 <![endif]-->

По материалам Условные комментарии в CSS и Использование условных комментариев в IE

Теги: •