Хаки для IE6

Автор: content Суббота, Апрель 7th, 2012 Нет комментариев

Рубрика: Стили CSS

Браузер Internet Explorer 6 (IE6) содержит большое количество ошибок при работе с CSS и, несмотря на это, окончательно еще не сошел в утиль. Ошибки порой совершенно нелогичны и для их преодоления браузеру требуется «подкладывать» персональный стиль. Поэтому для разработчиков, которые по тем или иным причинам верстают под IE6 нужно знать, как это сделать. Способов несколько и они различаются подходом, а также насколько соответствуют спецификации CSS.

Использование !important

При добавлении !important к значению стилевого свойства его важность повышается. Если переопределить значение того же свойства без !important, оно будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.

Пример 1

XHTML 1.0   CSS 2.1   IE 6    IE 7   IE 8   IE 9   Cr 11   Op 11   Sa 5   Fx 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Хаки</title>
   <style type="text/css">
    .hack {
     background: orange !important; /* Оранжевый цвет */
     background: green; /* Зеленый цвет */
     padding: 10px; color: #fff;
    }
   </style>
  </head>
  <body>
   <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
   nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div>
  </body>
</html>

В данном примере IE6 цвет фона блока покажет зеленым, остальные браузеры — оранжевым.

Символ подчеркивания перед свойством

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

Пример 2

XHTML 1.0   CSS 2.1   IE 6   IE 7   IE 8  IE 9   Cr 11   Op 11   Sa 5   Fx 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Хаки</title>
  <style type="text/css">
   .hack {
    background: orange; /* Оранжевый цвет */
    _background: green; /* Зеленый цвет */
    color: #fff; padding: 10px;
   }
  </style>
 </head>
 <body>
   <div>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
     sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
     aliguam erat volutpat.
   </div>
 </body>
</html>

В данном примере в браузере Internet Explorer 6 цвет фона блока будет зеленым, в остальных браузерах — оранжевым.

Комбинация * html

Для обозначения любого элемента в CSS используется символ звездочки (*), который называется универсальным селектором. Его понимают все браузеры, но вот сочетание * HTML — только один Internet Explorer до 6 версии включительно. Добавляя эту комбинацию перед селектором, получим стиль, который работает только в одном браузере.

Пример 3

XHTML 1.0   CSS 2.1   IE 6    IE 7    IE 8   IE 9   Cr 11   Op 11   Sa 5   Fx 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Хаки</title>
  <style type="text/css">
    * HTML DIV P {
      color: olive; /* Для IE6 */
    }
    DIV P {
      color: red; /* Для остальных браузеров */
    }
  </style>
 </head>
 <body>
  <div><p>Lorem ipsum dolor sit amet...</p></div>
 </body>
</html>

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

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

Источник: http://htmlbook.ru/content/khaki-dlya-ie6
Автор: Влад Мержевич

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты