Как писать СSS для IE или боремся с говнобраузером!

25 Фев 2011, рубрика: Баги, фиксы, Верстка |

Несмотря на то что в браузерах IE (особенно 6-м) веб-сайты отображаются криво, люди продолжают использовать этот говнобраузер. При чем, в 6-й и седьмой версии эксплорера один и тот же CSS отображается по разному о_О.  О том как писать CSS для IE в этом посте.

Первый способ — условные комментарии.

Использование условных комментариев – один из самых используемых способов для правки багов Internet Explorer. С их помощью, можно задать CSS стили только для определенной версии IE.

Выглядят они так:

<!--[if IE]>

<style type="text/css">

/* тут пишем css для ie */

</style>

<![endif]-->

При этом, можно писать условные комментарии для определенной версии говнобраузера:

<!--[if IE 6]> Отдельные стили для для IE6 здесь. <![endif]--><!--[if IE]>

<style type="text/css">

/* тут пишем css для ie6 */

</style>
<![endif]-->

И еще, можно использовать операторы, для задания условий. Вот они:

  • lt — меньше чем
  • lte — меньше или равно
  • gt — больше чем
  • gte — больше или равно

Например:

<!--[if gte IE6]>

<style type="text/css">

/* тут пишем css для ie6 и выше */

</style>
<![endif]-->

Второй способ – так называемые CSS хаки IE.

В данном случае будем писать CSS код, которые воспринимает только Internet Explorer. Например, добавление звездочки * перед любым CSS свойством будет значить, что это свойство будет учитываться только браузером IE7. Недостаток этого метода – невалидный код CSS. Но если вы все же решили решать проблему этим способом, то:

  • Для IE8: добавляем \9 в конце свойства перед точкой с запятой.
  • Для IE7: добавляем звездочку * перед CSS свойством.
  • Для IE6: добавляем подчеркивание перед СSS свойством.

Пример:

.polezniy {

color: green; /* для нормальных браузеров */

color: pink\9; /* IE 8*/

*color: black; /* IE 7*/

_color: blue; /* IE 6 */
}

И, наконец, мою любимый, 3-й способ.

Его изобрел Paul Irish. Идея до ужаса проста и гениальна. Она состоит в том, чтобы оформлять тег html стилем для определенной версии браузера, используя условные комментарии. После этого, при написании таблице стилей, нужно просто использовать класс IE как базовый селектор, например:

.Ie6 .polezniy {

_color: blue; /* IE 6 */

}

.Ie7 .polezniy {

*color: blue; /* IE 7 */

}

.Ie8 .polezniy {

color: blue\9; /* IE 8 */

}

.polezniy {

color: blue; /* для нормальных браузеров */
}

Как это реализовать?

<!--[if lt IE 7 ]> <html> <![endif]-->

<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->

<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->

<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

Для каждой версии Internet Explorer определяется свой стиль. Если браузером оказался не IE,то отдельный стиль определять не нужно. Это самый оптимальный и валидный способ определить CSS стили для IE.




Оцените полезность!
Не полезноПолезно (+36 баллов, 42 оценок)

9 комментариев на «Как писать СSS для IE или боремся с говнобраузером!»

  1. Sergey пишет:

    Сжечь этот бразуер=) на медленном огне=) Да и юзают его в основном домохозяйки, которые разве погоду зайдут посмотреть или гороскопы почитать...

  2. Выравнивание div по центру | Блог Полезного пишет:

    [...] приводит к выравниванию по центру только в моем “любимом” IE. В других же браузерах это свойство работает только [...]

  3. Виктор пишет:

    Странные вы ребята, надо писать код который понимают все браузеры. Всё зависит от предпочтений дизайнера. Я пишу сайт под IE7 и мне приходится отлаживать его код для правильного отображение в других Браузерах. У каждого свои заморочки. Особенно бесит, когда не работают коды CSS которые, согласно декларациям правильно отображаются всеми браузерами кроме IE а происходит с точностью до наоборот.

    • Polezniy пишет:

      Вы написали: «Странные вы ребята, надо писать код который понимают все браузеры.»

      Для этого и написан пост... Просто IE не такой как все) к нему нужен особый подход.

  4. Лечимся от IE с помощью IE.js пишет:

    [...] уже описывал некоторые способы бороться с этим делом, но в данном [...]

  5. Аноним пишет:

    Автору респект за мега полезную хрень! ;)

  6. lex пишет:

    СПАСИБО!!!! Особенно за это

    lt — меньше чем

    lte — меньше или равно

    gt — больше чем

    gte — больше или равно

.Все права защищены © 2017 Блог Полезного.