Указываем css-правила отдельно для IE

Как бы не была сильна ваша ненависть к Internet Explorer, вам все равно придется учитывать все его капризы при верстке, поскольку ваш начальник, его секретарша и многие другие пользователи используют этот злополуный браузер (еще и разных версий!). Чтобы сайт выглядел в IE так же как и в других браузерах, зачастую необходимо указывать для него отдельные css-правила, которые не должны быть видны нормальным браузерам. Расскажем сегодня о трех способах, с помощью которых можно это сделать.

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

Это вариант наиболее распространенный. По всей видимости, разработчики IE догадывались, какую свинью они подсовывают верстальщикам сайтов, поэтому решили организовать условные комментарии. Это html-комментарии, в которых, указывается условие на IE и его версии, для которых содержимое этого комментария будет видно:

<!--[if IE 8]> виден для IE8 <![endif]-->
<!--[if lt IE 8]> виден IE7 и более старым версиям <![endif]-->
<!--[if gte IE 8]> виден IE8 и более новым версиям <![endif]-->


Например:


<!--[if IE 8]>
<style type="text/css">
  /* здесь можно указать стили, видные только IE8 */
</style>
<![endif]-->

<!--[if lt IE 8]>
  так можно подключить файл в IE7 и более старых версиях
  <link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

Использование css-хаков

Следующий способ заключается в использовании правил, которые сможет понять только IE определенной версии. Например, если добавить звездочку перед css-правилом, то его сможет прочитать только IE7, а если символ подчеркивания, то только IE6. Однако, эти способы являются нежелательными, поскольку css перестает быть валидным. Кроме того, неизвестно, как отреагируют на них будующие версии браузеров.

Покажем, как можно указать цвет блока в зависимости от версии IE, используя css-хаки:

.box {
  background: gray; /* правило для всех */
  background: pink\9; /* для IE 8 и более старых */
  *background: green; /* для IE 7 и более старых */
  _background: blue; /* для IE 6 */
}

Условный класс тега html

Этот способ, вообще говоря, основан на первом. Но вместо того, чтобы подключать дополнительные css для разных версий IE, мы установим тегу html разные классы, которые потом будем использовать в css для указания стилей специально для IE:

<!--[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]-->

После этого, во всех браузерах кроме IE, элемент html не будет иметь класса, а в IE, в зависимости от версии он будет иметь класс ie6, ie7, ie8 или ie9. Теперь раскрасить блок в разные цвета в зависимости от браузера можно будет так:

.box {background: gray;} /* правило для всех */
.ie6 .box {background: blue;} /* правило для IE6 */
.ie7 .box {background: green;} /* правило для IE7 */
.ie8 .box {background: pink;} /* правило для IE8 */
.ie9 .box {background: black;} /* правило для IE9 */

Этот метод, в отличае от предыдущего, является синтаксически правильным и не приведет к ошибкам в будующих версиях браузеров.