10 возмутительных багов IE и пути их решения
Вступление
В практике каждого веб-разработчика были проблемы, связанные с непониманием браузерами IE некоторых элементов кода. И я как разработчик тоже постоянно сталкиваюсь с такими причудами IE, что порой просто хочется биться головой об стенку! Однако, время идет, мы учимся на своих ошибках, хотя правильней будет сказать не своих, а браузера IE, и начинаем понимать и привыкать к его странному поведению. Нам приходится с этим мириться, так как еще есть пользователи, продолжающие пользоваться 6 версией IE. Самый лучший способ предупредить проблемы - это сверять каждый свой шаг с поведением различных браузеров. Ведь проще устранить ошибку сразу же, чем потом рыскать среди тысячи строк html и css кодов.
Многие компании настроены против 6 версии IE, но людям, продолжающим им пользоваться, похоже, все равно.
Я вас ознакомлю со списком багов и способами их устранения, и, надеюсь, тем самым немного облегчу вам жизнь.
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; }
Надеюсь, данный урок вам очень пригодится:)