Вступление

В практике каждого веб-разработчика были проблемы, связанные с непониманием браузерами IE некоторых элементов кода. И я как разработчик тоже постоянно сталкиваюсь с такими причудами IE, что порой просто хочется биться головой об стенку! Однако, время идет, мы учимся на своих ошибках, хотя правильней будет сказать не своих, а браузера IE, и начинаем понимать и привыкать к его странному поведению. Нам приходится с этим мириться, так как еще есть пользователи, продолжающие пользоваться 6 версией IE. Самый лучший способ предупредить проблемы - это сверять каждый свой шаг с поведением различных браузеров. Ведь проще устранить ошибку сразу же, чем потом рыскать среди тысячи строк html и css кодов.

Многие компании настроены против 6 версии IE, но людям, продолжающим им пользоваться, похоже, все равно.

Я вас ознакомлю со списком багов и способами их устранения, и, надеюсь, тем самым немного облегчу вам жизнь.

1. Баг IE6, выдающий текст повторно

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

Есть множество способов решить эту проблему, но ни один из них мне не подходил, так как я работала над очень сложным проектом. И вот я нашла очень простой и интересный способ: я просто добавила ряд неразрывных пробелов прямо за оригинальным текстом.

Однако, Hippy Tech Blog, к которому я тоже обращалась за помощью, предлагает другие решения, к тому же он поясняет причину данного бага - оказывается во всем виноваты html теги комментариев, ведь IE6 не воспринимает их должным образом.

Пути решения:

• обрамлять комментарии тегами <!—[IF !IE]>
• удалять все комментарии
• в предшествующем элементе float указывать стиль {display:inline;}
• использовать отрицательные поля в соответствующих плавающих div
• добавить к оригинальному тексту примерно 10 &nbsp; пробелов (мой способ)

2. Position Relative и Overflow Hidden

Практически каждый раз, когда я пишу урок по jQuery , я сталкиваюсь с одной и той же проблемой, ведь я привыкла использовать overflow:hidden. Баг появляется, когда есть исходный (родительский) элемент overflow со значением hidden и дочерний элемент с позицией :relative.

Что же происходит вы можете увидеть вот в этой статье - position:relative and overflow in internet explorer

Решение
• добавить position relative и родительскому элементу

3. Min-Height для IE

IE просто игнорирует min-height свойства, но вы теперь можете справиться и с этой проблемой. Данное решение магически действует не только на IE6, но и на Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

Решение

selector {
min-height:500px;
height:auto !important;
height:500px;
}

4. Бикубическое отображение масштабируемых изображений

Вам понравится данное решение. Раздражает ли вас плохое качество картинок при изменении их масштаба в браузере IE? Согласитесь IE выполняет эту задачу не очень качественно.

Решение

img { -ms-interpolation-mode: bicubic; } 

5. Прозрачность PNG

Полагаю, что каждый знаком с этой проблемой, и все же я уделю и этому пункту немного времени.
Если вам нужно прозрачное изображение, и изображения в формате gif не могут дать вам нужного эффекта, вам пригодится данный прием. Но помните, что используя этот прием и устанавливая PNG в качестве фона, вы не сможете задать его позицию.

Решение

img { 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...); 
} 

6. Прозрачный фон встроенного окна IFrame

В firefox и safari нам не приходится что-либо настраивать, так как они делают фон iframe прозрачным по умолчанию, тогда как в IE такое не предусмотрено. Здесь вам нужен будет атрибут allowTransparency, а так же специальный CSS код.

Решение

/* в тег iframe */
<iframe src="content.html" allowTransparency="true">
</iframe>

/* в документ iframe, в данном случае content.html */
body {
background-color:transparent; 
}

7. Отключение вертикальной полосы прокрутки, предусмотрено в IE по умолчанию

По умолчанию IE всегда отображает вертикальную полосу прокрутки, даже если содержимое страницы полностью вмещается в окно браузера. В данном случае вы можете воспользоваться свойством overflow:auto , чтобы полоса прокрутки появлялась только при необходимости.

Решение

html {
overflow: auto;
}

8. Псевдокласс :hover

IE поддерживает только псевдокласс :hover для элемента anchor. Но ведь того же самого эффекта можно добиться и используя jQuery.

Решение

/* jQuery Script */
$('#list li').hover(

function () {
$(this).addClass('color');
},

function() {
$(this).removeClass('color');
}
);

/* CSS Стиль */
.color {
background-color:#f00; 
}

/* HTML */
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

9. Блочная модель - Box Hack Model

 Это самый частый баг. Дело в том, что IE рассчитывает ширину не так, как остальные браузеры. В соответствии со стандартом консорциума W3C, полная ширина должна подсчитываться следующим образом:

 • total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

 А вот IE делает подсчет, не учитывая данные отступов и границ

 • total width = margin-left + width + margin-right

 Решение

 Можно воспользоваться следующим CSS кодом. Все стандартные браузеры смогут прочесть такую строку - width:180px, кроме IE5.

#content {
padding:10px;
border:1px solid;
width:200px;
width:180px;
}

10. Удваивание полей

Если у вас имеются float элементы со значениями полей left или right, то 6 версия IE удваивает поля. Например, поле (интервал) шириной в 5 пикселей вот в такой строке margin-left:5px в IE6 превратится в поле с шириной в 10 пикселей. Данную проблему можно устранить добавив всего одну строку display:inline.

Решение

div#content {
float:left;
width:200px;
margin-left:10px;

/* для исправления бага */
display:inline;
}

Надеюсь, данный урок вам очень пригодится:)