Хаки для IE6

Влад Мержевич

Браузер Internet Explorer 6 (IE6) містить багато помилок у роботі з CSS і ще не припинив своєї активності. Деякі помилки навіть не мають логічного пояснення і для їх вирішення браузеру потрібно "підкладати" персональні стилі. Тому розробникам, які з певних причин верстають під IE6, важливо знати, як це зробити. Існує кілька способів, які відрізняються підходом та відповідністю стандартам CSS.

Використання !important

При додаванні !important до значення стилевого властивості його вагомість збільшується. Якщо змінити значення цієї ж властивості без !important, воно буде ігноруватися браузерами. Але не в Intenet Explorer версії 6 і нижче.

Приклад 1

XHTML 1.0CSS 2.1IE 6IE 7+CrOpSaFx

<!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 class="hack">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.0CSS 2.1IE 6IE 7+CrOpSaFx

<!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 class="hack">
     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.0CSS 2.1IE 6IE 7+Cr 11OpSaFx

<!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 застосовуються умовні коментарі, про які буде сказано в іншій статті.

IE6хаки
Короткий SEO текст: "Навчання використання хаків CSS для браузера Internet Explorer 6. Дізнайтеся, як вирішити проблеми верстки під IE6 за допомогою !important, символу підкреслення та комбінації * html. Покращте роботу з CSS і підвищте сумісність із стандартами."

Часті запитання