Хаки для IE7

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

У Internet Explorer 7 (IE7) порівняно з попередньою версією виправлено багато помилок. Проте з'явились нові помилки, які також вимагають написання окремого коду під цю версію браузера. Нижче представлені хаки для сьомої версії браузера Internet Explorer.

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

У сьомій версії була виправлена помилка з !important, але з'явилась нова. Якщо після властивості через пробіл додати знак оклику та будь-який набір символів, то стилівий властивість буде коректно сприйнята замість ігнорування. Зазвичай застосовують запис !ie, і всі браузери, крім IE6 і IE7, пропускають такий стиль. Зверніть увагу, що хак призводить до невалідного CSS-коду.

Приклад 1

XHTML 1.0CSS 2.1IE 6IE 7IE 8+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 !ie; /* Зелений колір */
     padding: 10px; color: #fff;
    }
   </style>
  </head> 
  <body> 
   <div class="hack">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
   sed diem nonummy nibh euismod tincidunt.</div>
  </body>
</html>

У цьому прикладі IE6 та IE7 покажуть фон блоку зеленим, інші браузери - помаранчевим.

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

Інша проблема пов'язана з !important у тому, що IE7 дозволяє в записі недопустимі символи. Конструкцію !!important всі браузери проігнорують, але IE6 та IE7 сприймають її як коректну. Використання такого запису призводить до невалідного CSS.

Приклад 2

XHTML 1.0CSS 2.1IE 6IE 7IE 8+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 !!important; /* Зелений колір */
    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>

У цьому прикладі у браузері IE6 та IE7 фон блоку буде зеленим, в інших браузерах - помаранчевим.

Зірочка перед ім'ям селектора

Додавання символу зірочки (*) перед ім'ям стилівого властивості суперечить специфікації CSS, але розуміється браузером Internet Explorer до версії 7.0 включно. Відповідно, властивості зі зірочкою спереду будуть працювати тільки в цій групі браузерів.

Приклад 3

XHTML 1.0CSS 2.1IE 6IE 7IE 8+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; /* Зелений колір (для браузера IE7 та нижче) */
    color: #fff; padding: 10px; 
   }
  </style>
 </head>
 <body>
  <div class="hack">Lorem ipsum dolor sit amet...</div>
 </body>
</html>

У цьому прикладі зелений колір фону у блоку буде встановлено тільки для браузера Internet Explorer версії 7.0 та нижче. У інших браузерах колір фону буде помаранчевим.

Конструкція *:first-child+html

Конструкція *:first-child+html, додана перед ім'ям селектора, працює тільки для браузера Internet Explorer 7. Плюс в тому, що вона відповідає специфікації CSS.

Приклад 4

XHTML 1.0CSS 2.1IE 6IE 7IE 8+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">
   *:first-child+html .hack {
     background: green; /* Зелений колір */
   }
   .hack {
    background: orange; /* Оранжевий колір */
    color: #fff; padding: 10px;
   }
  </style>
 </head>
 <body>
  <div class="hack">Lorem ipsum dolor sit amet...</div>
 </body>
</html>

У цьому прикладі зелений колір фону у блоку буде встановлено тільки для IE7. У інших браузерах колір фону буде помаранчевим.

Internet ExplorerIE6IE7хаки
Short SEO text: Унікальні хаки для стилізації веб-сайтів у Internet Explorer 7. Покращуйте вигляд вашого сайту, використовуючи ці корисні підказки.

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