Главная > Браузеры, CSS/Style Sheets > Спецификации CSS для Internet Explorer

Спецификации CSS для Internet Explorer


28 марта 2011, 13:00. Разместил: Mysterious Master
Мало кто любит копаться с багами, возникающими на страницах свеженького веб-сайта при открытии их посредством браузера Internet Explorer. Порой недоумение может вызвать то, что одна и та же страница может отображаться абсолютно по-разному в разных версиях браузера. Зачастую верстальщики используют уже состоявшийся список условий, предназначенных для того, чтобы избежать проблем с отображением страниц в IE.

1. Список условий для работы с IE

Данный список зачастую используется для решения множества проблем, возникших при работе с IE (версий 6, 7 и 8). Ниже представлены отрывки кода, требующегося для отображения страницы в различных версиях браузера IE:

* <!--[if IE 8]> = IE8
* <!--[if lt IE 8]> = IE7 или ниже
* <!--[if gte IE 8]> = выше или = IE8

<!--[if IE 8]>
<style type="text/css">
    /* css for IE 8 */
</style>
<![endif]-->

<!--[if lt IE 8]>
    <link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

2. Спецификация правил CSS для работы в IE (CSS-хаки для IE)

Другой способ объявления CSS-правил подходит исключительно для IE. Например, добавьте * перед параметром CSS и, таким образом, вы укажете на определение IE версии 7, а если добавите нижнее подчеркивание, то определяться будет уже 6 версия браузера. Тем не менее, данный метод не рекомендуется использоваться, потому что он делает ваш CSS-код не валидным.

* IE8 или ниже: для написание правила CSS конкретно для 8 версии браузера или ниже, добавляйте обратный слэш и 9 (т.е. \9) в самом конце перед точкой с запятой.
* IE7 или ниже: добавляйте * перед параметром CSS.
* IE6: добавляйте нижнее подчеркивание (_) перед параметром.

.box {
    
    background: gray; /* standard */

    background: pink\9; /* IE 8 and below */

    *background: green; /* IE 7 and below */

    _background: blue; /* IE 6 */

}

3. Условные классы HTML

Третий вариант объявления был обнаружен Полом Айришом (Paul Irish), и он заключается в том, чтобы добавлять CSS-класс вместе с версией IE в HTML-тэг посредством условного списка для IE. Т.е., посредством кода будет определен браузер и его версия, далее будет добавлен класс к тэгу html. Для определения конкретной версии IE, просто воспользуйтесь классом IE в качестве родительского селектора (например, .ie6 .box). Это отличный метод и с ним не возникнет проблем относительно валидности.

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

Вернуться назад