Сегодня я намерен представить вам 10 самых распространенных багов, имеющих место в браузерах IE, а так же расскажу как их избежать.
Вступление
В практике каждого веб-разработчика были проблемы, связанные с непониманием браузерами IE некоторых элементов кода. И я как разработчик тоже постоянно сталкиваюсь с такими причудами IE, что порой просто хочется биться головой об стенку! Однако, время идет, мы учимся на своих ошибках, хотя правильней будет сказать не своих, а браузера IE, и начинаем понимать и привыкать к его странному поведению. Нам приходится с этим мириться, так как еще есть пользователи, продолжающие пользоваться 6 версией IE. Самый лучший способ предупредить проблемы - это сверять каждый свой шаг с поведением различных браузеров. Ведь проще устранить ошибку сразу же, чем потом рыскать среди тысячи строк html и css кодов.
Многие компании настроены против 6 версии IE, но людям, продолжающим им пользоваться, похоже, все равно. Что делать? Продолжать бороться с багами данного браузера. Но хочу вас порадовать - ежемесячная статистика, которую нам любезно представляет w3cschool, гласит, что количество упрямых пользователей IE6 значительно сократилось за последние годы. В январе 2006 года их было 60,3%, а в августе 2009 года их зарегистрировано уже 13,6%. Думаю, к середине 2010 года мы, наконец, избавимся от IE6:) О ДА!!!
А пока, я вас ознакомлю со списком багов и способами их устранения, и, надеюсь, тем самым немного облегчу вам жизнь.
1. Баг IE6, выдающий текст повторно
Как раз перед тем, как сесть писать эту статью я столкнулся вот с таким багом: из ниоткуда выскакивает дублированный кусок текста, и размещается он прямо под оригинальным текстом. Я начал экспериментировать и о удача!, я нашел как с ним бороться.
Есть множество способов решить эту проблему, но ни один из них мне не подходил, так как я работал над очень сложным проектом. И вот я нашел очень простой и интересный способ: я просто добавил ряд неразрывных пробелов прямо за оригинальным текстом.
Однако, Hippy Tech Blog, к которому я тоже обращался за помощью, предлагает другие решения, к тому же он поясняет причину данного бага - оказывается во всем виноваты html теги комментариев, ведь IE6 не воспринимает их должным образом.
Пути решения:
• обрамлять комментарии тегами <!—[IF !IE]>
• удалять все комментарии
• в предшествующем элементе float указывать стиль {display:inline;}
• использовать отрицательные поля в соответствующих плавающих div
• добавить к оригинальному тексту примерно 10 пробелов (мой способ)
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;
}
Надеюсь, данный урок вам очень пригодится:)