Добавить в избранное

Как бороться со всем знакомыми багами IE

Дата: 2012-01-13

Несмотря на то что в основном пользуюn CSS3, иногда все же вынуждают бороться и с Internet Explorer при создании проектов, которые необходжимо зделать кросс-браузерными.

Такие брайзеры как opera, google hrom, safari, firefox постоянно усовершенствуються  и их  проблемы (баги) постоянно исчезают в новых версиях. Но существует и такой старый браузер как IE 6/7? В связи с тем что их не обновляют приходиться както с этим бороться чем мы сейчас и займемся. 

 

 Условные комментарии

<!--[if IE 6]>
IE6 stuff
<![endif]-->
Для IE 6.
<!--[if IE 7]>
IE7 stuff
<![endif]-->
И IE 7. 

Существуют еще некоторые функции, но восновном используются эти.

Если не комментарии, то... 

p
{
color: #000;
color : green\9; /* IE8 и ниже - на всякий случай */
*color: red; /* IE7 и ниже */
_color: blue; /* IE6 и ниже */
}

Если ваc не устраивает использовать условные комментарии, то вот хорошая альтернатива.

На всякий случай я добавил строку для IE8. Но если честно, с IE8 у вас будет намного больше проблем. Вам понадобится исправлять весь ваш CSS код.

Удвоенные отступы 

 p
 {
 float: right;
 margin-right: 50px;
 }

Возможно, это самый частый баг, связанный с параметром float. Для приведенного выше примера IE6 удвоит отступ справа. Чтобы это исправить, добавьте параметр display: inline, используя один из выше приведенных вариантов.

Игнорирование внутренних отступов у кнопок 

IE6 и IE7 не воспринимают внутренние отступы (padding) у кнопок. Чтобы это исправить, добавьте параметр overflow: visible для нужной кнопки. Подробнее об этом можно почитать здесь

Отрицательные значения отступов 

IE6 и отрицательные значения отступов (margin) - вещи несовместимые! Чтобы их “подружить”, добавьте параметр position: relative для нужного элемента.

 Данный урок подготовлен для Вас сайтом tiwebmaster.ru

Просмотров: 2465

Последние 5 уроков

Как бороться со всем знакомыми багами IE

Несмотря на то что в основном пользуюn CSS3, иногда все же вынуждают бороться и с Internet Explorer при создании проектов, которые необходжимо зделать кросс-браузерными.


Красивый навигационный блок

Небольшая статья по созданию блока меню, который Вы можете использовать на своем сайте.


Работа с cookie с помощью Jquery

Пример работы с куками на jquary + исходники статьи.


Структура DOM в случае ошибок в разметке HTML

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


Видео уроки по php,jquery,ajax,css,html,сео