CSS хаки для IE

12-09-2010

В этом маленьком уроке хочу показать вам как написать CSS стили которые будут работать только в IE6, IE7 или IE8. Эти хаки, которые я вам покажу, очень полезны особенно при появлении проблем с кроссбраузерностью. Никому не секрет что IE очень часто, криво отображает сайты которые во всех остальных браузерах работают нормально. Существует несколько видов CSS хаков, начнем с самых распространенных условных комментарий.

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

Условные комментарии работают только на IE под Windows для других браузеров это обычные HTML комментарии и они их игнорируют. Структура условных комментариев следующая:

<!--[if условие]> HTML <![endif]-->

Условие в комментариях можно поставить довольно токи гибкое. Вот список операторов которые можно использовать в условии:

  • ! отрицание
  • lt меньше
  • gt больше
  • lte меньше или равно
  • gte больше или равно

Примерно так их надо использовать:

<!--[if gte IE 6]>
	HTML код расположенный здесь будет работать только для браузеров IE6 и выше соответственно IE7, IE8
<![endif]-->

Наверное вы заметили что в списке нет оператора равно, а он и не нужен так как можно просто указать версию браузера в условии код между комментариями будет работать только для этого браузера:

<!--[if IE 6]>
	HTML код расположенный здесь будет виден только для IE 6
<![endif]-->

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

Хаки для IE6

Первый способ это добавление знака подчеркивания(_) перед свойством тем самым это свойство будет восприниматься только IE6. Например так:

body{
    _background:#ooo;
}

Второй способ добавление следующего кода вот этого *html перед селекторами тем самым теперь уже все свойства становятся видны для IE6 и ниже. Примерно так:

*html body{
    background:#000;
}

Хаки для IE7

Для IE7 существует большое количество хаков все даже наверное не получиться рассмотреть, потому что я их все и не знаю :) Ну начнем с хака который похож на последний рассмотренный хак для IE6, полоучается он путем добавления *+html перед селектором. Пример:

*+html body{
    background:#000;
}

Следующий хак будет виден не только IE7 , а наоборот всем современным браузерам кроме IE7 хак опять же добавляется в начало селектора. Пример:

html>/**/body {
    background:#000;
}

Следующий хак опять же добавляется перед селектором после чего свойства работают только для IE7, но на мой взгляд он немножко громоздкий *:first-child+html вот собственно что нужно добавить перед селектором. Пример:

*:first-child+html body{
    background:#000;
}

Хак который рассмотрим далее будет работать в IE7 и во всех современных браузерах, наверное такое тоже иногда бывает нужно :). Пример:

html>body {
    background:#000;
}

Ну и последний хак для ie7, добавляем перед свойством звездочку и все чики пуки:

body {
    *background:#000;
}

Хак для IE8

Для IE8 встречался только с одним хаком, не знаю может и существует другие если попадется обязательно дополню статью. Собственно хак:

body {
 background: #000\0/;
}
/*свойство следует добавлять в последнюю очередь*/

Вот и все вроде как, если кто знаком еще с какими то хаками пишем в комментарии :)

Masterix9.14.2010 09:09
Спасибо большое за статейку. Закинул себе в закладки. Полезно!
Гриша12.13.2010 10:12
Перевел не плохую статейку по CSS хакам, возможно будет интересно: CSS Хаки для Firefox, Opera, Safari и Internet Explorer.
Julliet1.27.2011 03:01
ТОже хотела добавить в закладки (в гугловские), но не получилось! Не валидная ссылка, пишет. The short_link field must contain a valid URL.
Annet2.12.2011 12:02
У меня добавилось без проблем)) в закладки)) Отличная статья! Спасибо!!!
Amir8.17.2011 12:08
Миша, хорошая статья, спасибо за ссылку. Да и блог полезнейший, очень поправил!!!))
Amir8.17.2011 12:08
Кстати, последний хак для IE 7 со знаком "*" перед свойством также для младших версий работает!
Юрий10.3.2011 06:10
Ещё использую со скрежетом в зубах хак вот такой: margin/*\**/: -3px\9; /* для IE 8*/
Владимир10.14.2011 06:10
Интересная статья и главное что авторская. В дополнении делюсь своей ссылкой тоже на авторскую статью темы CSS хаки http://vova-beg.ru/tezam/detail.php?id=1
ОСТАВИТЬ КОММЕНТАРИЙ