Десять приемов для приручения IE 6

Hiway 6 марта, 2009 Верстальщику

ie6-fixe
Когда я верстал новую тему для своего блога, я всерьез задумывался о том, чтобы не «ставить грабли» для IE 6. Но просто неуютно было созерцать то, что IE 6 сделал с валидной, семантической версткой. Поэтому пришлось ругаться, но править. «Плакать, колоться, но жрать этот чертов кактус».

Сначала по этому поводу я хотел написать статью, в которой бы поругал IE 6 и рассказал как поставить скрипт, который бы заставлял людей обновляться до последней версии IE. Но потом понял, что как верстальщику, мне было бы лучше рассказать о том, как решать проблемы с IE 6. За основу этой статьи мне послужил материал
10 Fixes That Solve IE6 Problems, но некоторые моменты в переводе я буду снабжать своими замечаниями и комментариями, из опыта моей верстки под IE 6.

1. Используйте DOCTYPE

Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает валидатору, какую именно версию (X) HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. DOCTYPE категорически важен для IE.
Для HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

или для XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. Установка position:relative;

Установка position:relative для элемента может решить множество проблем, в частности это решает проблему невидимости части блока, например фон в блоке обрезается, или склеивания блоков. Естественно вам нужно быть внимательным при прописывании абсолютного позиционирования для дочерних элементов.
Есть еще один нюанс использования position:relative, но он относится к верстке справа налево direction:rtl; или dir:rtl;. Суть проблемы в том, что дочерние элементы в контейнере с относительным позиционированием могут произвольно смещаться, позиционироваться со смещением. Эту проблему можно решить, если мы добавим для родительского элемента с относительным позиционированием принудительный hasLayout, о котором речь пойдет ниже.

3. Использование display:inline для элементов с float

Элементы со свойством float в IE 6 подвержены известному багу двойного margin, например, вы указываете слева margip: 5px, а в IE 6 получаете 10px. display:inline решит эту проблему, и при этом ваш CSS останется валидным.

4. Установка hasLayout для элементов

Многие проблемы рендеринга IE6 (и IE7) могут быть решены с помощью свойства hasLayout для элемента. Это внутренние значение для IE, которое определяет как будет позиционирован элемент по отношению к другим элементам страницы. Установка hasLayout может иметь существенное значение, если вам необходимо вывести строчный элемент, как, например, ссылка, в блоке или применить эффекты прозрачности.

Самым простым способом установить hasLayout является присвоение свойств высоты или ширины через CSS, также может быть использовано свойство zoom, но оно не входит в стандарты W3C. Однако, если вы используете уловные комментарии для подключения стилей IE, то его можно использовать. Оптимальным решением, конечно, является установка фактических размеров, но если это невозможно, вы можете использовать height:1%, опять же, где это возможно. Если родительский элемент не имеет обозначенной высоты, то это не повлияет на фактическую высоту дочернего элемента, у которого включен hasLayout.

5. Фиксим баг повторения символов

commentbug-shot В комплексной разметке может появится ошибка, когда последние несколько символов элемента со свойством float, могут появиться на очищенном (с применением свойства clear) элементе ниже. Есть несколько вариантов, которые стоит попробовать для решения этой ошибки:

Убедиться, что все элементы со свойством float имеют также display:inline;
Использование margin-right:-3px; для последнего элемента с float
Использование условных комментариев в качестве последнего пункта у плавающего элемента, т.е. 
Использование пустого div в последнем элементе контейнера (также может оказаться необходимым установить ширину в 90%, или такую же, как у родителя)

Подробное описание проблемы и решений можно посмотреть здесь: positioniseverything.net.

6. Используйте только теги «a» для кликабельных элементов или элементов со свойством :hover

IE6 может применять псевдокласс :hover только тегов «a».

Вы также должны использовать их для элементов управления в плагинах разработанных на JavaScript, чтобы они оставались доступными с клавиатуры. Есть несколько альтернативных вариантов, но теги «a» являются более надежными, чем большинство решений.

7. Используйте !important или современные селекторы чтобы исключить код для IE

Есть возможность написать код, конкретно работающий в IE6, не прибегая к традиционным хакам или условным комментариям. Например, минимальная высота может быть определена с помощью кода:

#element { 
    min-height: 20em; 
    height: auto !important; /* Понимают все браузеры */ 
    height: 20em; /* IE использует это свойство, так как не понимает min-height и !important, и при превышении высоты свободно тянется /* 
}

IE6 не понимает min-height и неправильно переопределяет свойство auto высоты 20em. Но при этом он увеличивает размеры если содержанию требуется больше высоты.

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

#element { 
    min-height: 20em; 
    height: 20em; 
} 
 
/* ignored by IE6 */ 
#element[id] { 
     height: auto; 
}

8. Избегайте процентных измерений

Проценты сбивают IE с толку. Если вы не можете точно определить размер каждого родительского элемента, лучше всего избегать размеров в процентах. Вы можете использовать процентные значения в других браузерах !important, например:

body { 
    margin: 2% 0 !important; 
    margin: 20px 0; /* IE6 only */ 
}

9. Испытывайте раньше и чаще

Начинайте тестирование в IE6 c первых строк проекта и заканчивайте, когда проект будет уже в стадии релиза; проблемы, которые будут не замечены на ранних стадиях, в последствии займут куда больше времени и сил для решения. Если ваш сайт работает в Firefox и IE6, то почти наверняка будет корректно работать в других браузерах.

10. Не бойтесь модифицировать ваш код

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

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

Постовой

Слушать Наше радио удобно на сайте РадиоПоток.

узнать тиц и pr сайтаНедорогие гостиницы Санкт Петербурга отель. Недорогие гостиницы Санкт-Петербурга, номера от 2500р.

Trackback.

Комментарии 12

Dima says:

июня 23, 2009 at 19:27

Спасибо Огромное!
Я начинающий. Голову сломал об этот IE6!
Все его ругают, но жить с ним придется еще долго...наверное...
Я просто не сразу понят, что такой глючный продукт выпустили в обращение, но пока ХР жив мы будем мучиться.

Reply
alae says:

июля 4, 2009 at 05:28

Спасибо Дейтсвительно сломать можно голову

Reply
WebSq says:

августа 18, 2009 at 22:53

Спасибо! Полезная статья.

Reply
veterrus09 says:

сентября 2, 2009 at 13:57

Спасибо! Очень полезная статья,
особенно для начинающих!

Reply
Ирина says:

сентября 7, 2009 at 18:49

Спасибо огромное за статью
Помогите, пожалуйста. Я только учусь...
Возникла проблема. Во всех браузерах нормально отображается, но в ИЕ6 при прописывании тега margin-left:20px; текст слева сдвигается вместе с картинкой под ним, что нарушает всю структуру сайта.
br.lora.in.ua
Подскажите, пожалуйста, как можно исправить эту проблему.
Заранее благодарна.
Спасибо.

Reply
- Hiway says:
  
  сентября 7, 2009 at 19:40
  
  Ирина, смотрел ваш сайт и не увидел там проблем. Укажите точнее страницу с проблемой.
  
  Reply
Ирина says:

октября 1, 2009 at 09:01

Hiway, спасибо. Уже всё исправила.
Статья хорошая.
Добавила в закладки.
Спасибо!

Reply
Роман says:

февраля 18, 2010 at 17:03

Помогите пожалуйста с версткой. Не могу понять почему съезжает контентная часть сайта под слайдеров картинок и новостей на www.too-ashoo.org в IE6. Пересмотрел весть код не как не могу разобраться, в других браузерах все ок! Уже три дня парюсь с этим !

Reply
sanaya says:

июля 2, 2010 at 16:14

лучший способ приручить 6го осла, это полностью на него забить
нужно вести пропаганду, чтобы все сайты не поддреживали 6го осла, уже гугл и ютуб отказались от этой поддержки, так что вместо приручения, засуньте осла подальше
www.eco-money.ru/forum/topic?id=27 — как известить людей о том, что у них страшный браузер
вообще уже когда создаю сайты, спрашиваю у заказчиков про 6го осла, рассказываю им о пользе именно не поддержки его и о том, как бороться с другими ослами, которые его используют) все заказчики за добро в мире и за мир добра) так что все сказали «ну тогда пусть показывает в нормальных браузерах нормально, а в осле так и быть. выдаст сообщение»

Reply
Ира says:

июля 10, 2010 at 06:39

Помогите пожалуйста. Не работают ссылки и меню в IE6 и IE7, в IE8,Mozille,Opere все нормально. idnk.ru

Reply
Даня says:

августа 7, 2010 at 16:55

Достаточно писать
Проще и понятнее

Reply
semarux says:

июня 15, 2011 at 08:56

действительно, хорошая статья. Хотелось бы больше увидеть кросс-броузерных решений (желательно с валидным css, без хаков)

Reply

Вебмастеру посвящается…