Очередной блог фрилансера

коротко и полезно о веб-разработке

Menu Close

Полное руководство по укрощению IE6

25-01_ie6_definitive_lead

На протяжении многих лет, Internet Explorer 6 (IE6) был несчастьем для веб-разработчиков во всем мире. Разработчики и пользователи стали использовать более предсказуемые, соответствующие стандартам, современные браузеры, такие как Firefox, Opera и Safari. Между тем, IE6 продолжает преследовать наши дизайны, скрываясь в темных местах, а умирает мучительно долго, в агонии. Поскольку мы ожидаем наступление того великого и светлого дня, когда IE6 окончательно умрет, так же как Netscape 4, давайте вспомним о некоторых пользователях, которые, по различным печальным причинам, продолжают мучиться с этим ужасным браузером.

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

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

Использование условных комментариев для IE6

Условные комментарии играют важную роль в нормальном поведении IE6. Условные комментарии это небольшие фрагменты кода, которые включаются в вашу (X)HTML разметку, что позволяет вам направить или отфильтровать определенные версии Internet Explorer. Далее пример условного комментария, которые перенаправляет IE6 специальным сообщением:

<!--[if IE6]>
  <p>Ой! Похоже вы до сих пор используете Internet Explorer 6!
     Вы достойны большего!</p>
<![endif]-->

Это очень полезный метод добавления кода и контента только для IE6. Другие браузеры, увидев этот условный комментарий, определят его как обычный (X)HTML-комментарий и просто проигнорируют его. Таким образом, когда мы адаптируем наши веб-страницы для IE6, условные комментарии позволят нам применить специальные CSS-стили, без вмешательства в остальные браузеры. Хотя условные комментарии являются изобретением Microsoft, они являются лучшим хаком для конкретных версий Internet Explorer.

Простейший способ использования условных комментариев для направления и применения стилей только для IE6 – это подключить CSS-файл только для IE6, в секции <head> ваших веб-страниц:

<!--[if IE6]>
  <link rel="stylesheet" href="http://domain.tld/ie6.css"
    media="screen" />
<![endif]-->

Затем, в файле ie6.css, мы можем разместить все IE6-хаки и другие уловки, требующиеся этому браузеру. Это позволит нам объединить все IE6-стили в один CSS-файл, который будет полностью игнорироваться другими браузерами. С таким методом применения стилей к IE6, нет необходимости в использовании IE6-хаков, так называемый «star-HTML» хак, или хак с подчеркиванием.

Направление и фильтр IE6 c «встроенными» CSS-хаками

Несмотря на пользу условных комментариев, бывают случаи, когда вам может понадобиться применить IE6-стили, без использования дополнительного CSS-файла. Такая ситуация может возникнуть на этапе разработки сайта, когда гораздо более удобно работать с одним файлом стилей, в котором стили для IE6 расположены рядом с «нормальными стилями», для простого сравнения. После того как разработка завершена, все встроенные CSS-хаки можно объединить в специальный IE6-CSS-файл, включенный с помощью условных комментариев.

К счастью, с появлением IE6, этих встроенных CSS-методов появилось достаточное количество. Через несколько лет, некоторые из этих «хаков» поднялись в топе, оказавшись чрезвычайно полезными и эффективными для применения к IE6. Наверное, самый распространенный из таких встроенных CSS-приемов, хак под названием «star-HTML»:

/* значение для IE6 */
* html #selector { color: red; }

В то время, как соответствующие стандартам браузеры игнорируют этот нелогичный селектор, IE6 трактует его как допустимый селектор, даже если html самый высокий элемент в дереве документа. Это позволяет нам применить CSS-стили только для IE6, без вмешательства в другие браузеры. Лучшее из всего то, что этот метод для IE6 полностью правилен.

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

/* фильтр IE6 */
html>body #selector { color: red; }

Этот селектор также полностью валидный и применяется ко всем, соответствующим стандартам, браузерам. Этот метод весьма эффективен, так как IE6 просто не понимает этот селектор.

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

#selector {
  width: 200px !important; /* значение для других браузеров */
  width: 100px;            /* значение для IE6 и ниже */
}

Когда эти два одинаковых свойства находятся в одном селекторе, IE6 применит второе свойство, если первое свойство включает директиву !important. Другие браузеры конечно же применят декларацию !important, тем самым позволив нам применить к IE6 другие значения свойств.

Включение поддержки альфа-прозрачности у PNG

Одним из самых печальных дефектов в IE6, является отсутствие поддержки 32-битной альфа-прозрачности у PNG-изображений. При отображении в браузере 32-битных альфа-прозрачных PNG, IE6 заменяет всю прозрачность на безобразный серый фон. К счастью, это хорошо известная и часто встречаемая проблема, для которой существует большое количество обходных путей и решений.

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

Наиболее практичным подходом будет использование 8-битного, альфа-прозрачного формата PNG, вместо обычного 32-битного формата. Чтобы его получить, используйте программу Adobe Fireworks (Photoshop этого не умеет), сохраните свое альфа-прозрачное PNG-изображение в 8-битном формате, и затем включите в свой дизайн, как обычно. 8-битные PNG, возможно, не так красиво выглядят как 32-битные версии, зато в IE6 они будут выглядеть, так же как и в других браузерах. Этот метод позволяет вам применять альфа-прозрачность во всех современных браузерах, без получения уродливого серого фона в IE6.

Конечно, есть возможность включить в IE6 поддержку 32-битной альфа-прозрачности. Существует множество различных скриптов, включающих такую функциональность, но все они основываются на разработке Microsoft, фильтре AlphaImageLoader, который можно включить в ваш CSS-файл следующим образом:

* html .iepngfix { behavior: url(iepngfix.htc); }

Чтобы заставить это работать, вам понадобится скачать эти два файла, и расположить их в той же папке, что и ваш CSS-файл. Первый файл – это прозрачное gif-изображение, и второй файл это HTC-скрипт, предоставляющий IE6 (и ниже) функциональность, которая требуется для 32-битной альфа-прозрачности. Это базовая реализация фильтра AlphaImageLoader, более расширенная функциональность также возможна, с использованием большого количества бесплатных скриптов. Вот некоторые из моих любимых:

Исправление полей и отступов

Ранние версии Internet Explorer неправильно интерпретировали модель боксов, включая рамки и внутренние отступы при подсчитывании ширины контента. Например, взгляните на следующий случай:

div {
  border: 10px solid black;
  padding: 10px;
  height: 100px;
  width: 100px;
}

В современных браузерах, высота и ширина этого блока, будет рассчитана в соответствии со спецификацией W3C как 100px + 20px +20px = 140px. В ранних версиях IE, несмотря на это, и высота, и ширина, будет ошибочно рассчитана в 100px. Это различие отвечает за разработку множества несоответствий между соответствующими стандартам браузерами и старыми версиями Internet Explorer.

К счастью, неправильная модель боксов была пересмотрена в IE6, который оказался способен возвратить правильную ширину для веб-страниц, включающих полный DOCTYPE. Когда присутствует полный DOCTYPE, IE6 включает один из двух «поддерживающий стандарты режим» или «почти поддерживающий стандарты режим», оба этих режима, позволяют IE6 правильно интерпретировать боксовую модель. Если же полный DOCTYPE не включен в веб-страницу, IE6 вернется в «quirks mode», и будет интерпретировать боксовую модель неправильно.

Таким образом, проблема боксовой модели легко решается в IE6, путем включения полного DOCTYPE и дальнейшей работы в стандартном режиме. Но если вам вдруг понадобится поработать в режиме quirks mode, простейший способ избежать применения внутренних отступов и рамок к элементам — задать им точную ширину. Вы всегда можете применить внутренние отступы и/или поля к закрытым элементам.

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

#selector {
  border: 10px solid black;
  padding: 10px;
  height: 100px;
  width: 100px;
}
* html #selector {
  \height: 140px; /* значение для IE5 и IE6 в режиме quirks mode */
  he\ight: 100px; /* значение IE6 в стандартном режиме*/
  \width: 140px;  /* значение IE5 и IE6 в режиме quirks mode */
  w\idth: 100px;  /* значение IE6 в стандартном режиме*/
}

В первом наборе правил, мы применяем ширину и высоту в качестве обычных значений, для соответствующих стандартам браузеров. Затем, во втором наборе правил, мы просчитываем неправильную боксовую модель в IE5 и IE6, в режиме quirks mode, путем корректировки значений высоты и ширины, включая дополнительные отступы и ширину рамки.

Установка min-width/max-width и min-height/max-height

Помимо боксов, IE6 не понимает максимальной и минимальной высоты и ширины. Это невероятно печальный факт для разработчиков, поскольку множеству макетов требуются эти свойства для нормального функционирования. В современных браузерах, мы можем использовать следующий CSS для достижения различных целей:

div.max-height {
  max-height: 333px;
}
div.min-height {
  min-height: 333px;
}
div.max-width {
  max-width: 333px;
}
div.min-width {
  min-width: 333px;
}

Конечно же, этот способ слишком простой для Internet Explorer, который абсолютно не понимает эти базовые CSS-свойства. К счастью, IE поддерживает свой собственный, проприетарный атрибут expression (выражение), который позволяет нам использовать JavaScript-выражения для управления свойствами (X)HTML-документа, такими как max/min-width и max/min-height . Например, для того, чтобы указать значение width с помощью атрибута expression, нам нужно написать следующее:

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

…Что эквивалентно этому

div {
  width: 333px;
}

Существует два минуса в использовании атрибута expression. Во-первых, поскольку выражения, по сути являются JavaScript-ом, они не будут работать с отключенным JavaScript-ом в браузере пользователя. Во-вторых, использование CSS-выражений для свойств min/max, очень ресурсоемко и может отрицательно повлиять на производительность браузера. Однако не стоит забывать, что свойства max/min-widths/heights являются важным инструментом в работе веб-дизайнера. Так что, принимая во внимание эти факторы, смотрите далее некоторые полезные CSS-выражения, включающие полную функциональность min/max в IE6.

max-width

/* max-width для IE6 */
* html div.max-width {
  width: expression(document.body.clientWidth > 776 ? "777px" : "auto");
}
/* max-width для обычных браузеров */
div.max-width {
  max-width: 777px;
}

min-width

/* min-width для IE6 */
* html div.min-width {
  width: expression(document.body.clientWidth < 334 ? "333px" : "auto");
}
/* min-width для обычных браузеров */
div.min-width {
  min-width: 333px;
}

max-height

/* max-height для IE6 */
* html div.max-height {
  height: expression(this.scrollHeight > 332 ? "333px" : "auto");
}
/* max-height для обычных браузеров */
div.max-height {
  max-height: 333px;
}

Хорошая новость в том, что мы можем пропустить безумные JavaScript/CSS выражения, когда применяем минимальную высоту в IE6. Благодаря Dustin Diaz, мы можем установить min-height в IE6, с этим фрагментом CSS:

min-height

/* min-height для IE6 */
div.min-height {
  min-height: 500px;
  height: auto !important;
  height: 500px;
}

Устраняем баг с двойными полями

Большинство веб-дизайнеров, занимающихся разработкой сайтов хорошо знакомы с проблемой двойных полей в IE6. Этот противный баг появляется когда вы назначаете float любому элементу (такому как div) в одной директиве, а затем применяете поля в той же самой директиве. Например, если мы сделаем так:

div {
  float: right;
  margin-right: 10px;
}

..IE6 (обычно) удвоит размер поля до 20px, без каких-либо оснований. Нет нужды говорить, что это баг двойных полей разрушил множество прекрасных дизайнов, вызывая боль и страдание разработчиков.

К счастью этот баг легко убить. Просто изменить тип отображения элемента, к которому применяется float, с типа block на тип inline, следующим образом:

div#selector {
  float: right;
  margin-right: 10px;
}
* html div#selector {
  display: inline; /* убиваем баг с двойными полями */
}

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

Чистка потока

Чистка потока от флоатов – другая общеизвестная задача, не только в IE6, но и во многих современных браузерах. В идеальном мире, одни элемент, содержащий другой плавающий элемент, полностью изолирует его от окружающих элементов. А в реальном мире веб-браузеров, флоаты, зачастую не изолированы. Когда такое случается, мы обычно говорим, что плавающий элемент не был «очищен» его родительским элементам. Хорошая новость в том, что существуют различные, простые способы чистить флоаты в IE6 и других браузерах.

Один из старейших способов очистить поток от флоата – использовать clearfix хак. Эта CSS-техника, работает посредством генерации контента после родительского элемента, используя CSS-псевдо-класс :after. Сгенерированный контент, впоследствии чистит плавающий элемент. Далее типовой пример:

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix { display: block; }
/* End hide from IE-mac */

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

Другой CSS-метод очистки потока – просто назначить float элементу-контейнеру. Например, если вы назначаете float картинке, находящейся в контейнере div который не изолирует ее, просто используйте следующий CSS:

div {
  float: left;
}

Затем, если содержащий элемент, должен вести себя как обычный, блочный элемент, примените к нему ширину в 100%, чтобы убрать пространство для следующего элемента.

div {
  float: left;
  width: 100%;
}

Все бы хорошо, но есть способ очистки потока и получше этого. Просто примените свойство overflow, к контейнеру div , и он автоматически будет расширяться по вертикали и очищать float у дочерних элементов. Вот пример:

div.container {
  overflow: hidden;
  width: 100%;
}

Назначение ширины для блока обязательно для Internet Explorer и Opera, но это не значит, что ширина должна быть равна 100%, вы можете использовать любую ширину и единицы измерения, которые посчитаете нужными. Если не хотите указывать ширину (width), вместо этого вы можете указать высоту (height). Для свойства overflow, также, могут быть использованных любые из перечисленных значений:

  • auto – отображает полосы прокрутки, если контент превышает указанную ширину
  • hidden – никогда не отображает полосы прокрутки, даже если контент не умещается в указанные размеры
  • scroll – всегда отображает полосы прокрутки, даже если в них нет необходимости.

Также, этот метод работает для очистки потока от плавающих элементов, бывают случаи, когда свойство overflow может помешать другим аспектам дизайна. Если это случится, вы можете попробовать ограничить применения overflow, используя overflow-x: hidden или overflow-y: hidden. И помните, что значение ширины элемента, можно заменить на значение высоты.

Устранение других проблем IE6

В завершении статьи, давайте рассмотрим несколько других проблем, часто встречающихся в IE6. Эти сложности, а также способы их устранения, довольно простые, так что я не буду долго рассказывать о них, и перейду прямо к делу.

Относительное позиционирование

Использование position: relative в своей работе, возможно, самый простой способ внести путаницу в IE6. Современные браузеры, без проблем отображают вложенные элементы, позиционированные относительно, но в IE6, зачастую появляются проблемы с чуть более сложной раскладкой. К счастью, есть довольно простое решение – установка hasLayout, путем добавления zoom:1; каждому, относительно позиционированному, элементу.

.selector {
  position: relative;
}
* html .selector {
  zoom: 1;
}

Помните, что вы не должные применять zoom:1; к любым строковым (inline) элементам, потому что, в этом случае IE6, будет трактовать их, как блочные элементы. Не забывайте об этом, и в следующих решениях.

Отрицательные поля

Отрицательные поля очень полезный прием во множестве различных раскладок, и большинство браузеров справляются с ними без проблем. К сожалению IE6 не любит отрицательных полей, пока вы не примените относительного позиционирования к целевому элементу:

.selector {
  margin: -1.5em;
}
* html .selector {
  position: relative;
  zoom: 1;
}

Помните, о назначении блоку zoom:1, которое необходимо, потому что это относительное позиционирование.

Устранение проблем с overflow

Использование overflow в IE6 иногда может привести к неожиданным, необъяснимым проблемам с отображением. К счастью, мы можем разрешить множество overflow-зависимых проблем, путем установки hasLayout с помощью – как вы уже, наверное, догадались – zoom:1. Далее пример:

.selector {
  overflow: hidden
}
* html .selector {
  zoom: 1;
}

Другая, странная проблема с overflow, связана с установкой свойства font-style: italic, которое растягивает ширину родительского элемента. Эта проблема решается, путем применения следующего CSS к родительскому элементу:

* html .selector {
  overflow-x: hidden;
}

Выстраивание плавающих элементов

Когда вы применяете float к элементам с фиксированной шириной, они располагаются горизонтально, заполняя всю ширину родительского элемента. По крайней мере так ведут себя блоки, в большинстве браузеров. В IE6, плавающие блоки не будут выстраиваться в одну линию, вместо этого, они скорее выстроятся лесенкой. Хорошая новость в том, что есть целых два решения этой проблемы. Первое – это применить свойство line-height: 0, к родительскому элементу:

.selector {
  float: left;
  width: 100px;
  clear: none;
}
* html .selector {
  line-height: 0;
}

Другой способ – по очереди указать каждому плавающему элементу, свойство display: inline.

.selector {
  float: left;
  width: 100px;
  clear: none;
}
* html .selector {
  display: inline;
}

Устранения проблем со списками

Наконец, если IE6 решит добавить дополнительные строки (li) после окончания вашего списка (ul), добавления HTML-комментария, волшебным образом решит эту проблему. Вот как будет выглядеть ваш код до и после применения этого комментария:

До:

<ul>
  <li>Firefox</li>
  <li>Opera</li>
  <li>Safari</li>
  <li>Internet Explorer</li>
  </ul>
<li>Internet Explorer</li>
<li>Internet Explorer</li>

После:

<ul>
  <li>Firefox</li>
  <li>Opera</li>
  <li>Safari</li>
  <li>Internet Explorer</li>
  <-- IE6 fix -->
</ul>

Напоследок

Конечно все без исключения верстальщики, и многие обычные пользователи не любят Internet Explorer версии 6, но взгляните на результаты голосования за две недели:

[poll id=»2″]

К сожалению проголосовало небольшое количество людей, но все же стоит задуматься, так ли уж сильно, мы хотим избавится от этого браузера?

Перевод статьи «Definitive Guide to Taming the IE6 Beast«, автор Jeff Starr

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо - поделиться ссылкой в социальных сетях: