Как бороться со всем знакомыми багами IE
Несмотря на то что я в основном пользуюсь CSS3, иногда все же возникает необходимость бороться и с Internet Explorer при создании проектов, которые обязательно должны быть кросс-браузерными.
Современные браузеры постоянно развиваются, и их баги и странное поведение исчезают в новых версиях. Но а как насчет старых браузеров, таких как IE 6/7? Так как их больше не обновляют, их баги уже воспринимают как что-то неизбежное.
Условные комментарии
<!--[if IE 6]>
IE6 stuff
<![endif]-->
Для IE 6.
<!--[if IE 7]>
IE7 stuff
<![endif]-->
И IE 7.
Есть еще , но эти две наиболее часто используются.
Если не комментарии, то...
Если вам не нравится использовать условные комментарии, то это хорошая альтернатива.
На всякий случай я добавил строку для IE8. Но если честно, с IE8 у вас будет намного больше проблем. Вам понадобится исправлять весь ваш CSS код.
Удвоенные отступы
Возможно, это самый частый баг, связанный с параметром float. Для приведенного выше примера IE6 удвоит отступ справа. Чтобы это исправить, добавьте параметр display: inline, используя один из выше приведенных вариантов.
Игнорирование внутренних отступов у кнопок
IE6 и IE7 не воспринимают внутренние отступы (padding) у кнопок. Чтобы это исправить, добавьте параметр overflow: visible для нужной кнопки. Подробнее об этом можно почитать здесь.
Отрицательные значения отступов
IE6 и отрицательные значения отступов (margin) - вещи несовместимые! Чтобы их “подружить”, добавьте параметр position: relative для нужного элемента.
Нужны еще ответы?
На опубликовано очень много самых распространенных багов IE, а также предоставлены хорошие решения проблем.
Конец
“Назывался он Internet Explorer 6. Мы живем в 2011, в эпохе современных веб-стандартов. Пришло время с ним попрощаться.”
… и я не единственный, кто с этим согласен :)
Современные браузеры постоянно развиваются, и их баги и странное поведение исчезают в новых версиях. Но а как насчет старых браузеров, таких как IE 6/7? Так как их больше не обновляют, их баги уже воспринимают как что-то неизбежное.
Условные комментарии
<!--[if IE 6]>
IE6 stuff
<![endif]-->
Для IE 6.
<!--[if IE 7]>
IE7 stuff
<![endif]-->
И IE 7.
Есть еще , но эти две наиболее часто используются.
Если не комментарии, то...
p
{
color: #000;
color : green9; /* IE8 и ниже - на всякий случай */
*color: red; /* IE7 и ниже */
_color: blue; /* IE6 и ниже */
}
{
color: #000;
color : green9; /* IE8 и ниже - на всякий случай */
*color: red; /* IE7 и ниже */
_color: blue; /* IE6 и ниже */
}
Если вам не нравится использовать условные комментарии, то это хорошая альтернатива.
На всякий случай я добавил строку для IE8. Но если честно, с IE8 у вас будет намного больше проблем. Вам понадобится исправлять весь ваш CSS код.
Удвоенные отступы
p
{
float: right;
margin-right: 50px;
}
{
float: right;
margin-right: 50px;
}
Возможно, это самый частый баг, связанный с параметром float. Для приведенного выше примера IE6 удвоит отступ справа. Чтобы это исправить, добавьте параметр display: inline, используя один из выше приведенных вариантов.
Игнорирование внутренних отступов у кнопок
IE6 и IE7 не воспринимают внутренние отступы (padding) у кнопок. Чтобы это исправить, добавьте параметр overflow: visible для нужной кнопки. Подробнее об этом можно почитать здесь.
Отрицательные значения отступов
IE6 и отрицательные значения отступов (margin) - вещи несовместимые! Чтобы их “подружить”, добавьте параметр position: relative для нужного элемента.
Нужны еще ответы?
На опубликовано очень много самых распространенных багов IE, а также предоставлены хорошие решения проблем.
Конец
“Назывался он Internet Explorer 6. Мы живем в 2011, в эпохе современных веб-стандартов. Пришло время с ним попрощаться.”
… и я не единственный, кто с этим согласен :)