|
/2008/04/00ie.png "Internet Explorer")
Популярность шестой версии Internet Explorer является причиной траты немалого времени на адаптацию кода страниц, идентично отображаемых во всех других браузерах, а иногда — и вовсе камнем преткновения, не позволяющим использовать в работе какую-то часть стандарта. Зачастую оформление страницы естесственным образом разделяется у меня на три этапа. На первом происходит, собственно, разработка дизайна с тестированием в Firefox (выбор браузера обоснован множеством удобных расширений). На втором — проверка, что все номально отображается в Opera, Safari и IE7. А на третьем — доработка под IE6 (иногда даже не надфилем, а молотком и пассатижами).
Хорошая статья на эту тему была опубликована пару дней назад на сайте CSS-Tricks. Ниже привожу ее перевод (повествование ведется от лица автора).
Автор: Крис Койер, css-tricks.com
Перевод: Александр Мусаев, paradigm.ru
Оригинал статьи: «IE CSS Bugs That’ll Get You Every Time», http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/
Когда IE6 только появился, в нем была лучшая поддержка CSS среди существовавших в то время браузеров. Но это было 7 лет назад. А различные мелкие недоработки в реализации CSS, преследуют веб-разработчиков до сих пор и часто становятся причиной отказа от использования той или иной техники.
Не смотря на то, что я стараюсь не ограничиваться возможностями шестой версии IE, все же понимаю важность корректного отображения страниц везде, где это возможно. Ниже перечислены основные вредоносные недочеты IE.
Блочная модель
Вероятно, это самый распространенный и один из самых неприятных багов в IE до шестой версии. Допустим, мы хотим определить блок:
div#box {
width: 100px;
border: 2px solid black;
padding: 10px;
}
IE6 сделает ширину блока равной 100px. В действительности ширина должна быть равна 124px, и все современные браузеры отобразят блок именно так.
Это мелкое отличие в рендеринге может вызвать немало неприятностей при верстке страниц. Думаю, поведение IE может быть в какой-то мере оправдано с точки зрения логики, но в любом случае оно противоречит спецификации.
Чтобы избежать этих проблем, я вообще не использую свойство padding для элементов, отвечающих за разметку страницы. Вместо этого можно задавать отступ непосредственно для тех элементов, которые содержат контент (например, <p>).
Удвоение полей
Ошибка проявляется при определении свойств float и margin.
div#box {
float: right;
margin-right: 20px;
}
IE6 увеличит ширину поля с 20 до 40px. Обычно эффект пропадает после добавления элементу <div> свойства display:inline;. Но ценой такого решения станет отсутствие возможности задавать ширину для такого <div>, так же как и для всех других inline-элементов.
Как и в предыдущем случае, проблему можно обойти. Понадобится либо добавить padding для родительского элемента, либо задать его в самом <div>. На свойство padding действие бага не распространяется.
Ограничений ширины и высоты
Применение свойств min-width и min-height само по себе является очень естесственным и логичным. Поэтому осознание факта их недоступности остается весьма безрадостным. IE 6 не просто воспринимает их неправильно, а вообще игнорирует.
min-height может быть очень полезен, например, для нижнего колонтитула страницы (иногда называемого «подвалом»). Допустим, мы хотим ограничить его высоту величиной 100px, чтобы обеспечить полное отображение фоновой картинки. При этом фиксация высоты свойством height остается нежелательной, т.к. объем текста в блоке может увеличиться.
Если ограничиться указанием min-height, для IE 6 это будет равноценным полному отсутствию опрелеления высоты. Зато указание height будет воспринято по смыслу именно как min-height. Иногда этим можно воспользоваться.
«Эффект лестницы»
Предполагается, что последовательность плавающих объектов должна выстраиваться в линию. Везде происходит именно так, но IE 6 зачем-то добавляет невидимый перенос строки после каждого блока, что приводит к ступенчатому отображению элементов. Проблема исправляется обнулением line-height. Более подробно это описано в отдельной заметке.
Отсутствие hover
Большинство современных браузеров допускает определение псевдо-классов hover для любых элементов. В IE 6 это возможно только для <a>. И даже в нем hover не будет отображаться при отсутствии атрибута href. Можно воспользоваться хитрым фиксом или просто смириться.
Альфа-канал для PNG
Удивительно, что в браузере Microsoft так долго отсутствовала поддержка этого формата (до седьмой версии). Cуществует огромное количество возможных решений и они описаны отдельным постом. Стоит помнить, что обычные PNG файлы (без прозрачности) отображаются нормально и их использование этого формата зачастую предпочтительнее GIF.
Ссылки по теме
Пожалуй, дополню этот пост всего одной ссылкой, которую просто не могу не дать — на интервью с архитектором Internet Explorer Алексом Могилевским, выложенное вчера на Хабре в качестве дополнения к подкасту Radio-T #82.
Интервью так же можно скачать с Народ.диска.
| 
/2008/04/01alex-mogilevsky-interview.jpg "01alex-mogilevsky-interview")
