Полное руководство по укрощению 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

39 комментариев

  1. Отличная статья! Да и вообще ваш блог нравится. Главное не смотрите, что так мало комментариев и не подумайте что вас не читают.. Так держать!

    Ответить

  3. Постоянно приходиться сталкиваться с данными проблемами((((((( Будем молиться, когда ие6 останется лишь в страшных снах айтишников и им будут пугать начинающих веб-разработчиков! xD

    Ответить

  7. Статья отличная. Сейчас делаю новый сайт для компании, но решил не пользоваться… мы сами виноваты, чем дольше мы будем пытаться бороться с 6м, тем дольше он будет нас мучать. Ребята, давайте забивать на него и в случае обнаружения у пользователя такого браузера заставлять его качать новый… ну сколько ж можно, в конце-то концов… )))

    Ответить

  9. Спасибо огромное за статью.
    Оказывается, теория, как не крути, всегда полезна.

    Ответить

  11. Статья очень хорошая, как верстальщик тоже читал про hasLayoat, но жо сих пор не представляю до конца, что это за атрибут такой, который влияет на раскладку потока элементов на странице… Может быть вы мне на пальцах можете объяснить, чтобы я отчетливо представлял все.

    Если задуматься… то очень хотим избавиться от IE, сколько лишнего времени он у вас отнимает?

    Ответить

  13. Статье твердый ЗачОт….
    …интересно кого необходимо ($$$=много бабла) чтобы наконец оффициально признали осла под номером 6 морально устаревшим?

    ————
    ALEX
    если ie6 умрет, верстать будет не интересно
    —————

    гораздо интереснее решать более сложные проекты основанные на новых достижениях, а пока 6 жив, приходиться оглядываться на него и заниматься….ну как бы помягче сказать….задротством чтоли….тем самым уходя в век минувший.. :(((

    Ответить

  16. Здравствуйте!Хорошая статья,подскажите пожалуйста как решить проблему с ie6 в div у меня должно быть фоновое изображение когда я ему прописываю backgroud-position:bottom во всех браузерах картинка перемещается вниз а в ie6 остаётся вверху как это исправить?

    Ответить

    1. Довольно странно, что у вас возникла такая проблема, насколько мне известно ie6 понимает позиционирование фоногового изображения. Единственное с чем я сталкивалась, что в ие не работает такая запись: background: url(images/kartinka.png)bottom left no-repeat, если не поставить пробел между скобкой и ключевым словом, в общем нужно записать так: background: url(images/kartinka.png) bottom left no-repeat.

      Ответить

  17. Да, хороший сайт и статьи хорошие, полезные. Уже не первый раз попадаю на него, когда через Google ищю ответ.
    Может подскажете, как для IE6 задать ширину div по ширине контента и расположить справа.

    Вот такой код:

    Home Sitemap

    div должен растягиваться только на эти слова (как в хороших браузерах) а он растягивается на всю ширину сайта и слова выравниваются слева.
    Фиксированную ширину задать нельзя, так как ссылки могут еще добавляться

    Заранее благодарю за ответ

    Ответить

    1. Что-то я в вашем примере не вижу блока div, только две ссылки, стоящие рядом. Но в любом случае width=100% не пробовали?

      Ответить

  18. Не получается вставить код

    Номе Sitemap

    Если сейчас опять не получится, то опишу его, он простой:
    div , а внутри него две ссылки подряд, без переноса.

    Если задать width=100% , в IE6 растягивается на всю ширину сайта (900рх) и ссылки выравниваются слева (float:right не работает)

    Ответить

    1. Попробуйте изменить саму html-разметку, вместо div, используйте маркированный список, кстати он больше подходит для реализации меню, то есть разметка будет примерно такой:

      <ul>
      <li><a href=»#»>Home</a></li>
      <li><a href=»#»>Sitemap</a></li>
      </ul>

      а стили такие:


      ul li{
      float: left;
      display: block;
      }

      Ответить

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

    Проблема с пресловутой прозрачностью. Есть сверстанный уже макет, где применены все стандартные средства для обеспечения прозрачности. Макет единый для всех внутренних страниц сайта. И вот, магия — на некоторых страницах PNG корректно показываются прозрачными, а на некоторых — с серым фоном. А на некоторых PNG вообще не показываются, но появляются после обновления.

    Набор css+html макета+js на всех этих страницах одинаковый. Контент несколько разный…но закономерностей выявить не получается.

    Кто-нибудь сталкивался с подобным? Что посоветуете? В прошлом проекте пришлось «оптимизировать» верстку и выбросить 80% PNG, заменив их гифками…проблема решилась только так. Но в текущем проекте такие «костыли» не подойдут.

    Ответить

    1. Саша, пользуйтесь многофункциональным и простым DD_belatedPNG, на который есть ссылка выше.

      Автору статьи: спасибо. Очень ценно, что все собрано в одном месте, перевод литературный, приятная верстка.

      Ответить

      1. Дмитрий, спасибо за совершенно правильный совет. Методом проб и ошибок я пришел именно к такому решению.

        Ответить

  22. Скажите, у кого нибудь было такое, что если ширину картинки задаёшь в процентах, то ie6 берёт 100% от размера этой картинки. По моему то берётся 100% от родительского элемента? Если кто нибудь знает решение, скажите пожалуста!

    Ответить
  24. Уведомление: Полное руководство по укрощению IE6 |

  25. Спасибо за статью, а на счет ie6 я наоборот похвалю его !!!ха….сколько он заставил разработчиков из зад….. руки достать и начать головой работать, ведь такие проблемки заставляют нас искать решения и заодно нас учат думать головой а не з…. так что хорошо что он есть …..

    Ответить
  27. Уведомление: К.Д. Кузнецов » Blog Archive » Ох уж этот IE 6

  28. Спасибо давно пользуюсь вашей статьей часто выручает, вот надо бы добавить ещё один баг в IE 6 что он не выставляет высоту менее 20px.
    Решение 1.

    Решение 2.
    div style=»height:10px; font-size:1px; line-height:0; background-color:green»> 

    Ответить

  29. Повторяю с вернымы кодом:
    Спасибо давно пользуюсь вашей статьей часто выручает, вот надо бы добавить ещё один баг в IE 6 что он не выставляет высоту менее 20px.
    Решение 1.


    Решение 2.

     

    Ответить

  32. Добрый день, попробовала Ваш совет:

    Наиболее практичным подходом будет использование 8-битного, альфа-прозрачного формата PNG, вместо обычного 32-битного формата.

    В шестерке все также серый фон у картинки

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *