Популярность шестой версии 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.

Интервью так же можно скачать с Народ.диска.

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

В такой ситуации рамку можно отключить. Раньше я использовал для этого функцию JavaScript blur():

<h1><a href="/" onclick="this.blur();"><img ... /></a></h1>

А сегодня нашел еще один более лаконичный вариант, основанный на CSS2. А именно, на свойстве ouline, которое как раз предназначено для настройки деталей отображения рамки вокруг ссылок. Код очень простой:

a:active, a:focus, img { outline: 0; }

Проверено в актуальных версиях IE и Firefox. Есть некоторые подозрения на счет IE6, т.к. в нем традиционно ничего не работает как должно. Но под рукой этого браузера сечас нет. Такие дела.

Оригинал: http://css-tricks.com/prevent-menu-stepdown/
Автор: Chris Coyier (css-tricks.com)
Перевод: Александр Мусаев (paradigm.ru)

Всем, кто работал с «плавающими» HTML-элементами, должно быть известно, что при задании контейнеру значения CSS-свойства float:left, следующий за ним «всплывает» вверх, если это возможно. В подобной ситуации часто встречается одна проблема — позиционируемые элементы выстраиваются «лестницей».

Например, при оформлении таким образом меню, сделанного на основе ненумерованного списка (<ul>), браузер может отобразить его примерно так:

Рассмотрим пример корректного горизонтального форматирования элементов меню для следующего HTML кода:

<ul id="menu">
	<li><a href="#">My</a></li>
	<li><a href="#">Little</a></li>
	<li><a href="#">Menu</a></li>
</ul>

Для того, чтобы придать списку необходимый внешний вид, ссылки внутри него оформляются в виде блоков увеличенной ширины:

ul#menu li a {
	display: block;
	width: 130px;
	text-align: center;
	font-weight: bold;
	float: left;
	color: white;
	font-size: 1.2em;
	text-decoration: none;
	background: #600;
}

(Прим. переводчика: при оформлении подобного меню, я бы дополнительно задал увеличенное значение верхнего и нижнего padding. Кроме того, сочетание фиксированной в пикселях ширины контейнера и размера шрифта, определенного в относительных единицах —, не слишком хорошее решение автора.)

При подобном оформлении, элементы меню не выстроятся в горизонтальную линию, т.к. «якоря» (<a>) находятся внутри блочных контейнеров <li>. А блочные контейнеры всегда выводятся браузером так, как если бы за ними следовал перенос строки (невидимый <br>). При этом, высота «ступеньки» может варьироваться в соответствии с текущим значением line-height.

Решение элементарно:

ul#menu li {
	display: inline; /* Средство от "лестницы" */
}

Теперь элементы списка будут выводиться браузером линейно, и меню приобретет подобающий вид:

• Храните CSS во внешних файлах, присоединяя их к HTML документам тегами link.

  <link rel="stylesheet" type="text/css" href="/css/common.css">

  Это даст возможность браузеру сохранять такие файлы в кэше и не загружать лишний раз при переходах внутри сайта.

• Всегда стремитесь минимизировать количество отдельных CSS файлов. Когда их число возрастает, внутри стилей становится сложно найти необходимое, особенно если селекторы в одном файле наследует те, что определены в другом. Именам файлов всегда стоит задавать осмысленные имена (например, common.css и print.css будут выглядеть понятнее, чем style1.css и vasya.css).

  Имена директорий, в которых хранятся таблицы стилей, так же стоит определять согласно стандартизованной (пусть даже в рамках одного сайта) схеме. Например, /css/* или /themes/theme_name/css/*. Кроме того, не стоит забывать о директиве @import, как хорошем вспомогательном средстве структуризации CSS файлов. Уже на этапе проектирования файлового фреймворка для сайта нужно избавить себя от потенциальной проблемы поиска по всему дереву файлов нужной таблицы стилей.

• Практически никогда не стоит использовать inline CSS, т.е. определения стилей непосредственно внутри HTML кода с помощью атрибутов style. Во-первых, это противоречит логике (смысл применения CSS состоит в отделении стилей оформления от семантикидокумента, а не в смешивании того и другого), во-вторых, может сделать документ менее управляемым, блокируя возможность задавать стили тем или иным элементам из внешнего CSS.

  Встраивание CSS является приемлемым в тех случаях, когда не предполагается правка кода в дальнейшем. Например, если он генерируется програмно для отображения в каких-то конкретных условиях. Но в этом случае, опять же, соит все взвесить, чтобы не перенести проблему с путанницей в стилях на уровень генератора кода.

• Атрибуты id и class стоит использовать строго по назначению: id — для идентификации уникальных элементов, class — для объединения типовых элементов группы. С их помощью можно подчеркнуть структуру и логику построения документов. В то же время при неправильном использовании, HTML и CSS может стать более громоздским и неуправляемым.
• Не стоит многократно повторять определение одного и того же класса для группы элементов, когда его можно определить для их общего контейнера. Например, вместо

  <a class="nav" href="index.html">Home</a>
  <a class="nav" href="info.html">Info</a>
  <a class="nav" href="contents.html">Contents</a>

  гораздо логичнее сделать

  <div id="navlinks">
  <a href="index.html">Home</a>
  <a href="info.html">Info</a>
  <a href="contents.html">Contents</a>
  </div>
  

• Отражайте иерархию HTML документов в CSS файлах. Например, вначале стоит дать наиболее общее описание для тегов, далее — перейти к описанию классов, сгруппированных согласно смысловым узлам страниц (общая разметка страницы, шапка, навигационные элементы, отдельные колонки и т.д.).

  Благодаря хорошей структурированности стилей, их код можно сделать более лаконичным и легко воспринимаемым. Не понадобится лишний раз переопределять глобальные стили и делать аналогичные описания для разных элементов.
  О поддержке структурированности CSS не стоит забывать не только при первоначальной верстке, но и при дальнейшей корректировке стилей, т.к. на этом этапе так же есть хорошие шансы создать беспорядок даже в грамотно-написанном CSS.

• Не нужно лишний раз использовать !important. Очень часто его используют для исправления неполадок в частных случаях, но наличие !important само по себе может привести к дополнительным сложностям при дальнейшей работе с таким CSS. То же, кстати, относится к разнообразным хакам: если без них можно обойтись, значит без них нужно обойтись.
• Совершенно бессмысленным шагом явялется использование цепочек id (например #main #maintable #navbar). id по определению предназначен для уникальной идентификации элементов и для определения стиля всегда достаточно простого указания его имени, без дополнительного уточнения. Цепочки уместно ипсользовать в отношении элементов и классов.

Ссылки по теме

• How to create clean and efficient CSS by Istvan «RTML 101» Siposs @ Y-Times Blog

Тем не менее, возможность задавать предельные значения для масштабируемых блоков очень полезна. Например, для того чтобы «резиновая» верстка не теряла товарный вид при максимизации окна браузера на большом мониторе, заставляя пользователя читать полуметровые строки текста.

Раньше я решал этот вопрос с помощью JavaScript: небольшая функция автоматически корректировала ширину «резиновых» контейнеров при изменении размера окна браузера. Вчера был найден довольно более красивый способ заставить IE ограничивать масштабируемые блоки. Тоже на основе JS.

В имлементации CSS IE есть своя-собственная конструкция — expression, чье значение может вычисляться с помощью client-side скрипта. Например, так:

div {
   width: expression(750 + "px");
}

Что эквивалентно:

div {
   width: 750px;
}

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Limiting width</title>
<style type="text/css">
div#cont {
// min-width и max-width для IE
   width:expression(document.body.clientWidth > 776 ?
      "777px" : (document.body.clientWidth < 334 ? "333px" : "auto"));
// то же, для всех остальных
   max-width: 777px;
   min-width: 333px;

   height:320px;
   text-align:center;
   color:black;
   background:#f5f5f5;
}
</style>
</head>

<body>

<div id="cont">Hello World!</div>

</body>
</html>

Файл лежит здесь: http://things.paradigm.ru/limited-width.html. Я проверил работоспособность этого кода в IE 5.55, 6, 7, Firefox и Opera. Теоретически, должно работать и в IE 5.01, т.к. expression появился именно в ней, но проверить не начем — эта версия на моем компьютере почему-то не уживается с пятью другими инсталяциями IE (:

Точно таким же образом, как и ширину, можно контролировать высоту блоков. Разница в том, что вместо параметра document.body.clientWidth, потребуется использовать this.scrollHeight, а изменять, вместо width, CSS свойство height.

Основано на материалах perishablepress.com.