Как писать СSS для IE или боремся с говнобраузером!
Несмотря на то что в браузерах 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 оценок)
Сжечь этот бразуер=) на медленном огне=) Да и юзают его в основном домохозяйки, которые разве погоду зайдут посмотреть или гороскопы почитать...
А еще фконтакте сидят
К сожалению, домохозяеек очень много, более того — они, как правило, и есть ЦУ
[...] приводит к выравниванию по центру только в моем “любимом” IE. В других же браузерах это свойство работает только [...]
Странные вы ребята, надо писать код который понимают все браузеры. Всё зависит от предпочтений дизайнера. Я пишу сайт под IE7 и мне приходится отлаживать его код для правильного отображение в других Браузерах. У каждого свои заморочки. Особенно бесит, когда не работают коды CSS которые, согласно декларациям правильно отображаются всеми браузерами кроме IE а происходит с точностью до наоборот.
Вы написали: «Странные вы ребята, надо писать код который понимают все браузеры.»
Для этого и написан пост... Просто IE не такой как все) к нему нужен особый подход.
[...] уже описывал некоторые способы бороться с этим делом, но в данном [...]
Автору респект за мега полезную хрень!
СПАСИБО!!!! Особенно за это
lt — меньше чем
lte — меньше или равно
gt — больше чем
gte — больше или равно