На текущий момент самыми «проблемными» браузерами остаются Internet Explorer 6 (и в меньшей степени 7). Используя накопившиеся методические наработки, вы сможете обеспечить надежную работу своих сайтов в этих браузерах, не отказываясь при этом от создания сложных макетов страниц, позволяющих получить все преимущества поддержки технологии CSS последними версиями браузеров.

Решение
Приведу свои соображения по поводу различных методов работы с CSS и советы по обеспечению нормального отображения сайтов Internet Explorer 6 и 7.

Процесс разработки
Следующая схема работы помогает мне избежать большинства возможных ошибок IE6 и 7.
 

Работайте с самым современным браузером
Изначально следует разрабатывать сайт с расчетом на современные браузеры, хорошо поддерживающие спецификацию CSS, например, последние версии Firefox, Opera и Safari. Поддержка браузерами стандартов CSS становится все более полной, а вовсе не наоборот, поэтому написанный код также должен соответствовать спецификации, поскольку в этом случае он будет корректно отображаться будущими браузерами. В процессе разработки сайта я никогда не открываю его в Internet Explorer, поскольку в этом случае может быть трудно удержаться от написания дополнительного кода для исправления найденных ошибок.

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

Проведите валидацию HTML- и CSS-кода
Если ваша разметка соответствует стандартам W3C, то возникающие в старых браузерах ошибки будет легче исправить. Браузеры по-разному обрабатывают код, в который закрались ошибки, и потому незакрытый тег <div> или пропущенная точка с запятой в правиле стиля может привести к досадным сбоям в ходе дальнейшей разработки. Поэтому перед тем как продолжить, обязательно воспользуйтесь сервисом валидации
CSS-кода и разметки документа W3C1 и проверьте свой документ на наличие ошибок.

Протестируйте сайт в других современных браузерах
Затем посмотрите, как сайт отображается в других современных браузерах: Firefox, Opera, Safari, Chrome и Internet Explorer 8. Мне довольно редко приходится вносить в код какие-либо исправления для этих браузеров, и они, как правило, незначительны и касаются реализации отдельных элементов структуры документа. Для современных браузеров я никогда не использую хитроумные приемы или альтернативные таблицы стилей, поскольку всегда можно найти более простой способ решения проблемы.

Проверьте сайт в Internet Explorer 6 и 7
Если ваш CSS-код прошел валидацию и корректно обрабатывается большинством современных браузеров, то пришло время исправлять ошибки его интерпретации старыми браузерами. Я твердо придерживаюсь мнения, что не стоит нагромождать свой код дополнениями, предназначенными для устаревших браузеров.

Скорее всего, при просмотре сайта в IE6 вы обнаружите какие-либо проблемы – возможно, небольшие несоответствия вроде лишних отступов между элементами страницы или более серьезные недочеты – например, когда определенные части вашей страницы «уезжают» из предназначенной для них области или вовсе исчезают. В такой ситуации главное – сохранять спокойствие. Большинства сбоев IE6 можно с легкостью избежать, изменив или добавив несколько правил стилей специально для этого браузера. То же самое можно сказать и о IE7, с тем лишь исключением, что этот браузер работает более корректно.

Добавьте таблицы стилей, предназначенные для конкретных браузеров, с помощью условных комментариев
На данном этапе нужно добавить дополнительные таблицы стилей для IE6 и/или IE7 с помощью условных комментариев. Этот метод был рассмотрен в предыдущем разделе. Такую таблицу стилей нужно добавить в заголовок (head) вашего документа после уже указанных в его HTML-коде таблиц стилей, чтобы содержащиеся в них правила, написанные специально для Internet Explorer 6 и 7, переопределили аналогичные правила в основной таблице стилей.

Исправление ошибок, возникающих в Internet Explorer
Теперь можно постепенно начать исправление возникающих в Internet Explorer 6 и 7 ошибок, добавляя необходимые правила в альтернативную таблицу стилей, будучи в полной уверенности, что они будут использованы только теми браузерами, для правильной работы которых они необходимы. Использование рассматриваемых ниже приемов позволяет избежать большинства проблем Internet Explorer 6. Для исправления сбоев Internet Explorer 7 обычно необходима лишь часть из них. В IE7 редко встречаются «баги», отсутствующие в IE6, а алгоритм их исправления, как правило, один и тот же.

Проверьте DOCTYPE
Убедитесь, что в первой строчке вашего документа указано правильное описание типа документа. О важности использования правильного элемента doctype говорилось в предшествующем разделе «Что такое режим совместимости и как его избежать?». Указание неправильного типа документа может привести к тому, что ваши документы будут выглядеть довольно странно. Поэтому прежде чем начать что-то предпринимать для исправления ошибок, убедитесь, что все браузеры, в том числе IE6 и 7, отображают страницу в стандартном режиме.

Отсутствие поддержки свойства min-height в IE6
Internet Explorer не поддерживает свойство min-height, задающее минимальную высоту элемента, а вместо этого интерпретирует значение свойства height в этом смысле. Таким образом, в других браузерах значение свойства height определяет фиксированную высоту элемента, а Internet Explorer 6 воспринимает его в качестве значения минимальной высоты, поэтому размер блока по вертикали может увеличиваться и превысить задуманные для него параметры. Чтобы избежать такой ситуации, достаточно использовать свойство height в таблице стилей для IE6 в том же качестве, что и свойство min-height в основной таблице стилей.

Свойство hasLayout
В движке IE6 и 7 есть таинственный компонент – свойство hasLayout, причина большого количества самых причудливых «багов». Существуют элементы, ответственные за размер и расположение содержащегося
в них контента; считается, что они обладают этим свойством. Прочие элементы определяют свой размер и расположение за счет родительского элемента или более отдаленного предка. Если элемент не определяет структуру своего содержимого, это может привести к странным последствиям – например, исчезновению части контента или неправильному отображению структуры документа. Некоторые элементы, среди которых ячейки таблицы, по умолчанию обладают свойством hasLayout, чего, однако, нельзя сказать об элементах div. Если элементу задать такие CSS-свойства, как float со значением left или right, он также начинает определять структуру документа, что приводит к решению большинства возникающих проблем. Самое главное – найти CSS-свойство, которое изменит статус элемента, но не повредит структуре документа. Для IE6 присвоить элементу свойство hasLayout можно, задав значение 1% его свойству height. Как уже было сказано выше, IE6 воспринимает свойство height как min-height, поэтому такое значение определит минимальную высоту элемента, что не окажет никакого влияния на структуру документа, а сам элемент по-прежнему сможет вместить весь необходимый контент. Конечно, такие правила нужно указывать в таблице стилей, предназначенной специально для IE6. IE7, напротив, совершенно верно обрабатывает свойство height, поэтому такой трюк в данном случае не сработает. Однако вместо этого можно задать любое, даже нулевое значение свойству min-height, что также изменит статус элемента в IE7. Это вполне надежный способ, поскольку значением свойства min-height по умолчанию также является 0. Не всегда удается сразу определить, какой элемент требует добавления такого «триггера» изменения статуса, но обычно виновника всех беспорядков на странице можно вычислить поступательно. Вначале я рассматриваю элементы с самой высокой степенью вложенности, т. е., если несколько блоков div вложены друг в друга, то я добавляю значение высоты для последнего из них, обновляю страницу и смотрю, привело ли это к каким-то изменениям. Если все осталось по-прежнему, я перехожу к div на уровень выше и т. д.

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

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