Опубликовано: 12.05.2011 Последняя правка: 08.12.2015

CSS хаки для IE

На этой странице описаны CSS хаки для IE, используя которые можно назначить HTML-элементу какие-то свойства, понимаемые только этим браузером, но игнорируемые другими.

CSS хаки для IE6

Браузер IE6 имеет больше всего багов и проблем с пониманием стандартов W3C, хотя для своего времени он был очень неплох.

Хак с применением правила CSS !important

IE6 игнорирует правило CSS !important, когда внутри селектора присутствует одно и то же свойство более одного раза. В этом случае он поступает просто и использует значение того свойства, которое находится в коде ниже других, независимо от того указан для него приоритет или нет. Соответственно, если сначала указать свойство с приоритетом, а ниже написать его же, но без приоритета, то все браузеры выберут первый вариант, а IE6 — второй. В итоге имеем валидный, соответствующий синтаксису CSS хак для IE6.

Хорошо, но как же поступить, если надо применить к элементу какое-то свойство, которое должно сработать только в IE6, а в других браузерах оно вообще не нужно? Все очень просто. Сначала, как обычно, пишете это свойство с !important, но указываете у него значение, которое оно имеет по умолчанию, а ниже пишете его же, но с необходимым вам значением. Вот и все. Кстати можно поступить и наоборот, задав для всех браузеров нужное значение свойства, а для IE6 установить по умолчанию. Все зависит от того, что вам надо.

Синтаксис:

селектор { свойство: значение !important; } селектор { свойство: значение; }

Валидация: да.

Пример HTML и CSS: хак для IE6 и правило !important

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS хаки для IE</title>
  <style type="text/css">
   .par {
    background: orange !important; /* для всех */
    background: blue; /* для IE6 */
    width: auto !important;
    width: 200px;
   }
  </style>
 </head>
 <body>
  <p class="par">
   В IE6 цвет фона будет синим, а ширина параграфа 200px,
   в остальных браузерах - фон оранжевым, ширина по умолчанию.
  </p>
 </body>
</html>

Результат примера

Хак с применением селектора * html

Этот CSS хак для IE6 связан с применением универсального селектора, который ассоциируется в CSS сразу со всеми HTML-элементами на странице. Однако если его использовать в создании селектора потомков, где указать перед селектором html, то это будет противоречить всякой логике, хотя синтаксис CSS и не будет нарушен. Ведь получается, что таким объявлением мы говорим браузерам, что на странице присутствуют элементы, которым тег <HTML> является потомком. Естественно этого не может быть, так как данный тег — это корневой элемент HTML-страницы, и все браузеры это понимают и игнорируют такой селектор, но только не IE6.

Синтаксис:

* html селектор { стили CSS }

Валидация: да.

Пример HTML и CSS: хак для IE6 и универсальный селектор

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS хаки для IE</title>
  <style type="text/css">
   .par {
    color: green; /* для всех */
   }
   * html .par {
    color: red; /* для IE6 */
   }
  </style>
 </head>
 <body>
  <p class="par">В IE6 этот текст будет красным, в остальных браузерах - зеленым.</p>
 </body>
</html>

Результат примера

Хак с применением дочернего селектора

IE6 не понимает дочерние селекторы, что является отличным поводом для создания хака, если мы хотим, чтобы он «не видел» какие-то селекторы с определенными свойствами.

Синтаксис:

html > body селектор { стили CSS }

Валидация: да.

Пример HTML и CSS: хак для IE6 и дочерний селектор

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS хаки для IE</title>
  <style type="text/css">
   .par {
    font-weight: bold; /* для всех */
   }
   html > body .par {
    font-style: italic; /* для IE6 */
   }
  </style>
 </head>
 <body>
  <p class="par">
   В IE6 шрифт текста будет жирным, в остальных браузерах - не только жирным, но и курсивным.
  </p>
 </body>
</html>

Результат примера

Хак с применением подчеркивания или дефиса

Этот CSS хак для IE6, использует особенность данного браузера распознавать свойства CSS, перед которыми ставится знак подчеркивания (_) или дефиса (-).

Синтаксис:

селектор { _свойство: значение; } селектор { -свойство: значение; }

Валидация: нет.

Пример HTML и CSS: хак для IE6 и свойства с подчеркиванием или дефисом

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS хаки для IE</title>
  <style type="text/css">
   .par {
    _text-align: center; /* поймет только IE6 */
    -border: 2px red solid; /* и тоже распознает только IE6 */
   }
  </style>
 </head>
 <body>
  <p class="par">
   В IE6 будет рамка и текст по центру, в остальных браузерах все останется по умолчанию.
  </p>
 </body>
</html>

Результат примера

CSS хаки для IE6 и IE7

Как и другие браузеры, семейство IE понимает некоторые хаки, сразу несколькими версиями. Здесь мы рассмотрим те, которые поддерживают шестой и седьмой Internet Explorer.

Хак с применением CSS expression

Вообще, это не совсем хак, так как CSS expression — это внедренная в браузер технология, которая позволяет использовать скрипты прямо внутри CSS. Эти скрипты указываются вместо значения у свойства и применяются для его динамического расчета. То есть то, что высчитает скрипт, в итоге и становится значением. Таким образом можно заткнуть многие дыры шестого и седьмого IE, но помните, что expression замедляет (иногда серьезно) работу браузера, поэтому лучше подключать его через условные комментарии. Да и вообще вместо хаков лучше использовать условные комментарии.

Синтаксис:

селектор { свойство: expression(скрипт); }

Валидация: нет.

Пример HTML и CSS: CSS expression в IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS хаки для IE</title>
  <style type="text/css">
   body {
    min-width: 1000px; /* для всех */
    _width: expression(document.body.clientWidth > 1000? "auto": "1000px"); /* для IE6 */
   }
  </style>
 </head>
 <body>
  <p>Содержимое страницы.</p>
 </body>
</html>

Результат примера

Как вы знаете, IE6 не понимает свойство CSS min-width, поэтому в данном примере скрипт внутри expression высчитывает необходимое значение и подставляет его в свойство width.

Хак с применением символов слеша и звездочки

Если перед CSS-свойством поставить слеш (/) или звездочку (*), то поймут его только IE6 и IE7, на чем и основан данный хак.

Синтаксис:

селектор { /свойство: значение; } селектор { *свойство: значение; }

Валидация: нет.

Пример HTML и CSS: хак для IE6 и IE7 со слешем и звездочкой

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS хаки для IE</title>
  <style type="text/css">
   .par {
    color: red; /* для всех, включая IE6 и IE7 */
    /font-style: italic; /* только для IE6 и IE7 */
    *background: blue; /* только для IE6 и IE7 */
   }
  </style>
 </head>
 <body>
  <p class="par">
   Во всех браузерах будет красный текст,
   но в IE6 и IE7 он будет еще и курсивным, плюс добавится синий фон.
  </p>
 </body>
</html>

Результат примера

Хак с применением символа !

Если через пробел после значения свойства CSS поставить восклицательный знак (!), то его не проигнорируют только браузеры IE6 и IE7. Эта особенность и послужила для создания хака.

Синтаксис:

селектор { свойство: значение !; }

Валидация: нет.

Пример HTML и CSS: хак для IE6 и IE7 со знаком !

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS хаки для IE</title>
  <style type="text/css">
   .par {
    background: green; /* для всех, включая IE6 и IE7 */
    color: white !; /* только для IE6 и IE7 */
   }
  </style>
 </head>
 <body>
  <p class="par">
   Во всех браузерах будет зеленый фон,
   но в IE6 и IE7 к нему добавится белый текст.
  </p>
 </body>
</html>

Результат примера

CSS хаки для IE7

Здесь поговорим о CSS хаках, которые понимает только IE7.

Хак с применением универсального и соседнего селекторов

Internet Explorer начал поддерживать соседние селекторы с версии 7.0, однако с этой поддержкой в Microsoft немного переборщили. Дело в том, что если для создания соседнего селектора использовать универсальный селектор и селектор тегов html, то он не должен работать, ведь у тега <HTML> не может быть соседей (<!DOCTYPE> не в счет). Однако в IE7 такое сочетание работает, что и было использовано для очередного хака.

Синтаксис:

* + html селектор { стили CSS }

Валидация: да.

Пример HTML и CSS: хак для IE7 с универсальным и соседним селекторами

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS хаки для IE</title>
  <style type="text/css">
   .par {
    border: 3px green solid; /* для всех */
   }
   * + html .par {
    border: 3px red solid; /* для IE7 */
   }
  </style>
 </head>
 <body>
  <p class="par">
   В IE7 рамка будет красной, в остальных браузерах - зеленой.
  </p>
 </body>
</html>

Результат примера

Хак с применением универсального и соседнего селекторов + :first-child

Этот хак похож на предыдущий, только в селектор добавился псевдокласс CSS :first-child.

Синтаксис:

*:first-child + html селектор { стили CSS }

Валидация: да.

Пример HTML и CSS: хак для IE7 с псевдоклассом CSS :first-child и универсальным и сосоедним селекторами

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS хаки для IE</title>
  <style type="text/css">
   .par {
    font-weight: bold; /* для всех */
   }
   *:first-child + html .par {
    font-style: italic; /* для IE7 */
   }
  </style>
 </head>
 <body>
  <p class="par">
   Во всех браузерах шрифт будет жирный, но в IE7 еще и курсивный.
  </p>
 </body>
</html>

Результат примера

CSS хаки для IE8

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

Хак с применением идентификаторов

Если в таблице стилей поставить рядом (без пробелов) два идентификатора, то согласно синтаксиса CSS это будет означать, что мы хотим применить стили к HTML-элементу, который содержит оба этих идентификатора одновременно. Но синтаксис HTML не предусматривает наличие у одного элемента сразу двух идентификаторов (в отличие от классов), поэтому по логике вещей такое указание браузерам надо игнорировать. И IE8 с этим согласен, то есть он воспринимает такое указание, как ошибку, а вот остальные браузеры — нет.

А теперь о самом хаке. Если в CSS указать нужный селектор, а через запятую от него слитно написать два идентификатора, то IE8 не воспримет подобные стили и пропустит все, что находится в скобках. Таким образом можно создавать CSS, который поймут все браузеры кроме восьмого Эксплорера.

Синтаксис:

селектор, #идентификатор1#идентификатор2 { стили CSS }

Валидация: да.

Пример HTML и CSS: хак для IE8 с идентификаторами

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS хаки для IE</title>
  <style type="text/css">
   .par {
    color: orange; /* для IE8 */
   }
   .par, #ie8#only {
    color: blue; /* для остальных */
   }
  </style>
 </head>
 <body>
  <p class="par">
   В IE8 цвет текста будет оранжевым, а в остальных браузерах - синим.
  </p>
 </body>
</html>

Результат примера

CSS хаки для IE8 и IE9

Хаки, которые одновременно понимают браузеры IE8 и IE9.

Хак с применением символов \0/

Если в конце значения свойства поставить знаки \0/, то все браузеры его пропустят, кроме IE8 и IE9.

Синтаксис:

селектор { свойство: значение\0/; }

Валидация: нет.

Пример HTML и CSS: хак для IE8 и IE9 с символами \0/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS хаки для IE</title>
  <style type="text/css">
   .par {
    border: 2px orange solid; /* для всех */
   }
   .par {
    border: 2px blue solid\0/; /* для IE8 и IE9 */
   }
  </style>
 </head>
 <body>
  <p class="par">
   В IE8 и IE9 рамка будет синей, а в остальных браузерах - оранжевой.
  </p>
 </body>
</html>

Результат примера