хаки для IE

Апрель, 21st 2010Рубрика: Web-мастеринг 4523
Подписаться на комментарии по RSS

Как же надоел этот глючный IE - говорю как web-разработчик, постоянно сталкивающийся с кривизной данного браузера. Более того, один и тот же код не одинаково воспринимается версиями 6, 7 и 8 осла. Из-за этого приходится заново верстать некоторые элементы страниц постоянно искать обходные пути. Но нельзя его со счетов сбрасывать, т.к. основная масса пользователей упорно сидит на IE - откуда такая любовь к этому убожеству не ясно...

Делать нечего - будем бороться с его некорректной работой. Описываемы тут методы - это конечно не правильно с точки зрения валидности CSS кода, но иногда без этих методов просто не обойтись. Итак, рассмотрим как написать свойства css, работающие только в IE (хаки для ie6 и ie7).

Решение проблемы

К счастью, можно написать отдельные стили, которые будут работать только в IE. Причем я предлагаю вариант как для шестой, так и для седьмой версий. Например, если поставить перед свойством две наклонные черты( // ), оно будет восприниматься лишь браузером интернет эксплорер всех версий. Другие браузеры такое свойство проигнорируют.

Для седьмой версии используется хак

*:first-child+html ваш_элемент {...}
или
*+html ваш_элемент {...}

Для шестой версии существует возможность поставить минус(-) или нижнее подчеркивание(_) перед свойством, при этом седьмой ie не отреагирует на него. Можно также использовать конструкцию:

* html ваш_элемент {...}

Пример:

div {
background: red; /* для нормальных браузеров */
//background: green; /* для всех ie */
-background: blue; /* для ie6 */
}
* html div {
background: blue; /* ещё один способ для ie6, кому как больше нравится :) */
}

В этом случае фон блока будет красным в браузерах Opera и FF, зеленым в седьмой и синим — в шестой версии Internet Explorer.

В примере менялся цвет фона блока для разных браузеров. Используя этот метод можно добиться идентичности отображения и кроссбраузерности. Чаще всего приходится прибегать к нему при позиционировании и задавать разные значения свойств типа left, top, padding, margin, width и других, связанных с размерами, процентами и пикселами.

Кроме вышеупомянутого способа существует ещё один способ, позволяющий подключить отдельный стилевой файл, не воспринимаемый определенной версией любимого браузера — условные комментарии.

для всех версий ie:

<![if !IE]>
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>

для версий 5, 6 и 7 соответственно:

<![if !IE 5]>
    <link rel="stylesheet" type="text/css" href="not-ie5.css" />
<![endif]>
<![if !IE 6]>
    <link rel="stylesheet" type="text/css" href="not-ie6.css" />
<![endif]>
<![if !IE 7]>
    <link rel="stylesheet" type="text/css" href="not-ie7.css" />
<![endif]>

Любопытно также, что таким способом можно скрывать HTML код от определенной или всех версий ie. Например, надпись «HTML-код» будет отображаться во всех браузерах кроме ie6, если поместить её в if-ie следующим образом:

<![if !IE 6]>
     HTML-код
<![endif]>

Ну и на последок, как и для "любимого" IE, существуют специальные хаки(трюки), позволяющие показывать стили только браузерам FireFox и Opera.

Css хаки для FireFox:

html:root ваш_элемент {...} /* этот работает ещё и для Safari */
или
ваш_элемент, x:-moz-any-link {...}

Css хаки для Opera:

html:first-child ваш_элемент {...}
или
@media all and (min-width: 0) { ваш_элемент {...} }

Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

Без регистрации
ваш комментарий будет опубликован после проверки
Регистрация на сайте

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