10 приемов, решающих проблемы IE6

Internet Explorer 6Как я уже писал ранее, нам пока приходится поддерживать IE6, из-за его, столь продолжительной, популярности. Делать это не просто и часто надо сдерживать себя, чтобы не воспользоваться хаками, сталкиваясь с очередной ошибкой браузера. В этой статье мы рассмотрим 10 решений, наиболее часто встречающихся проблем IE6 с интерпретацией HTML и CSS кода.

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

Вы должны всегда размещать DOCTYPE в начале каждой HTML-страницы. И желательно strict-версию.

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

Или для XHTML:

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

Последний аргумент в пользу того, чтобы перевести IE6 в quirks mode – это то, что в нем IE достаточно изворотлив.

2. Устанавливайте position: relative.

Задавая элементу position:relative, вы решаете множество проблем, особенно, если вы когда-нибудь сталкивались, с не правильным выравниванием блока или вообще невидимым блоком. Конечно, будьте осторожны, что блоки, позиционированные абсолютно будут, соответственно, перепозиционированны относительно.

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

Float-элементы с отступом margin могут вызвать известную ошибку двойного отступа в IE6.

Например, вы задаете отступ слева 5px (margin-left:5px), а фактически получаете отступ размером в 10px. Position:relative устранит проблему, а ваш CSS останется валидным.

4. Устанавливайте элементу свойство hasLayout.

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

Самый простой путь установки hasLayout – задать высоту или ширину (zoom также может быть использован, но он не валиден) в CSS. Устанавливать настоящие размеры блока рекомендуется, но если это нереально, можно использовать height:1%. Если у родительского элемента не задана высота, физическая высота элемента не затрагивается, потому что hasLayout не установлен.

5. Исправление бага, повторяющихся символов.

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

  • задать всем float-элементам display:inline;
  • задать margin-right:3px; последнему float-элементу
  • использовать для вставки текста conditional comments, например
    1
    <!--[if !IE]>Put your commentary in here...< ![endif]-->
  • использовать пустой div в последнем элементе (для того, чтобы задать ширину 90% или подобное)

Подробное описание проблемы на positioniseverything.net.

6. Используйте только тег <a> для областей со ссылкой и эффектов наведения мыши.

IE6 может применить эффект наведения мыши только к тегу <a>.

Вы должны также использовать тег <a> для управления виджетами на JavaScript. Так вы сможете использовать навигацию на клавиатуре. Есть несколько альтернативных вариантов, но тег </a><a> самый надежный среди всех решений.

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

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

1
2
3
4
5
#element {
  min-height: 20em;
  height: auto !important; /* understood by all browsers */
  height: 20em; /* IE6 incorrectly uses this value /*
}

IE6 не понимает 'min-height' и не правильно переопределяет 'auto' ширину. Конечно, высота увеличивается, если контенту нужно больше места.

Другим вариантом является использование расширенного селектора. Например:

1
2
3
4
5
6
7
8
9
#element {
  min-height: 20em;
  height: 20em;
}

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

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

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

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

9. Тестируйте в процессе, тестируйте часто.

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

10. Занимайтесь рефакторингом своего кода.

Часто дольше исправлять ошибку в коде, чем переосмыслить этот участок макета, в целом. Незначительные изменения HTML и, еще проще, CSS часто более эффективны. Это значит, что вы, практически, не изменяя код, избавляетесь от проблем в будущем.

Я пропустил ваш любимый багфикс IE6? Замечания и предложения приветствуются.

Перевод статьи Крейга Баклера «10 Fixes That Solve IE6 Problems».


Метки: ,
Связанные записи:
Сколько еще нам придется поддерживать IE6?
  • Опубликовано: Сентябрь 18th, 2009
  • Категория:/ HTML /
Rss Commenti

12 Ответов

  1. «Если ваш сайт работает в Firefox и IE6, наверняка, он будет правильно отображаться и в других браузерах.» — великое заблуждение.
    Бывает и такое, что в ие7 бывают косяки, когда в ие6 их нету.
    Или опера выеживается

    #1 Алексей

  2. Ах-ах. Недавно верстал макет, который отлично работал в ФФ(2-3.5), в ИЕ(5.5-8), но абсолютно не работал в Опере10 и Вебките новом (Сафари4, Хром3,4)

    (пункты)
    1: спорный
    2: тут нужно с умом, и правда всплывёт только после экспериментов
    4: zoom:1
    6: есть htc фикс
    ps: у капчи сильно быстро дохнет кэш

    #2 Deerua

  3. В пункте 7 ошибка: речь идёт о ширине, а в примере указана высота.

    #3 Erlang

  4. @Алексей, привет. Ну да, всякое бывает, но тут берется за пример, обычный, не геморойный макет, и чаще, если Gecko и IE долбит, то и все остальные будут долбать :)

    #4 admin

  5. @Deerua, привет. У тебя, кстати, что-то хедер в блоге не отображается. Да я вот Алексею выше тож ответил, что ситуации разные бывают.

    Согласен спорить по первому пункту, аргументируй =)
    Во втором пункте – ну хуже точно не будет.
    В третьем – не валидно, низя.
    В шестом – лишний http-запрос и трафик.

    По поводу каптчи – спасибо, исправим!

    #5 admin

  6. @Erlang, ага, спасибо, исправил.

    #6 admin

  7. Хорошая статья спасибо, все по делу, в мемориз.

    #7 Чистяков Денис

  8. Страшноватый перевод, если честно…

    «The last thing you need is IE6 going into quirks mode – it’s quirky enough already» — это никак не «Последний аргумент в пользу того, чтобы перевести IE6 в quirks mode…». Скорее уж как-то так: «Меньше всего вам нужно переводить IE6 в режим совместимости со старыми глюками, он достаточно глючный и без этого».

    «If the parent element has no set height, the element’s physical height is not affected but hasLayout is enabled» — не «…физическая высота элемента не затрагивается, потому что hasLayout не установлен», а как раз наоборот: «…высота не затрагивается, но hasLayout включается».

    Это то, что сильнее всего бросилось в глаза искажением смысла.

    И в 3-м пункте, видимо, издержка копипаста — в заголовке «display:inline» (как в оригинале, это правильно), а в тексте почему-то «position:relative» (???).

    Ну и насчет hasLayout-а — по моему опыту, zoom (кстати, с недавних пор он поддерживается и в Safari — https://bugs.webkit.org/show_bug.cgi?id=20045#c2) все-таки самый надежный и безвредный способом его включения. Хотя тут уж на вкус на цвет :)

    #8 SelenIT

  9. Ого, я от прочитения данной стаьи только растерялся. Вот скажите пожалуйста, почему в 6IE здесь _http://babay.com.ua/?p=6 разваливаются комментарии?

    #9 Mixa

  10. существует ещё тонна других «особенностей» ie 6, не решаемые приведёнными способами.

    #10 alshur

  11. Странно, что забыли про такой «шикарный» глюк IE 6-7, как игнорирование тегом параметра z-index: всегда помещается на передний план

    #11 Awesome

  12. Странно, что забыли про такой «шикарный» глюк IE 6-7, как игнорирование тегом select параметра z-index: select всегда помещается на передний план

    #12 Awesome

Оставить комментарий





О проекте

Publications feed