Главная CSS-верстка

10 фиксов, решающих проблемы Internet Explorer 6

Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems». Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью совпадает с моей точкой зрения и подтверждено моей практикой. Букв много, не пугайтесь =)

Так исторически сложилось, что браузер Internet Explorer 6, выпущенный аж 7,5 лет назад, до сих пор не дает себя забыть, все еще, к сожалению для практически любого веб-разработчика, являясь одним из самых популярных веб-браузеров. К сожалению — потому что поддержка веб-стандартов в нем далеко отличается от его следующих версий, а также других современных браузеров.

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

Следующие трюки (фиксы, исправления, рекомендации — называйте, как хотите) решают большинство багов IE6, заставляя его плясать под дудку веб-разрабочика. Причем, это вовсе не хаки и не условные комментарии, а соответствующие стандартам CSS-правила, которые сохраняют валидность CSS- и HTML-кода.

Итак…

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

    Всегда используйте запись, обозначающую тип HTML-документа (указывается в самом верху HTML-страницы). При этом тип документа Strict является рекомендуемым:

    <!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">
    

    Несмотря на то, что рекомендован Strict, на практике пока довольно часто приходится использовать тип документа Transitional, как минимум по той причине, что Strict запрещает применение параметра _target, а многие используют его по привычке.

  2. Применяйте position: relative.

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

  3. Используйте display: inline для плавающих элементов (те, к которым применяется свойство float).

    У плавающих элементов, имеющих левый/правый отступ margin, в IE6 этот отступ удваивается. Т. е. если вы указали 5px, то в IE6 он будет 10px. Применение display: inline как раз решает данную проблему.

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

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

    Самый простой способ установки hasLayout — это указание CSS-свойств height или width (также может быть использован zoom: 1, однако это правило не является частью стандарта CSS). Т. е. рекомендуется устанавливать фактические размеры элемента: высоту или ширину, однако там, где это невозможно сделать, можно использовать правило height: 1%. Вот примерчик:

    <div class="block">
    	какой-то текст
    	<div class="absolute">это позиционируем абсолютно</div>
    </div>
    
    .block {
    	position: relative; /* для того, чтобы блок с .absolute
    												позиционировать относительно этого блока */
    	padding: 20px; /* трабл у некоторых дочерних элементов в IE6 часто
    									  возникает, когда у родителя установлен паддинг */
    	height: 1%; /* вот оно, спасение для IE6 */
    }
    .absolute {
    	position: absolute;
    	bottom: 0;
    	left: 0;
    }
    

    Довольно часто решить какой-либо баг в IE6 помогает одновременное использование правила position: relative и height:1%.

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

    Хитро структурированные CSS-макеты могут вызвать в IE6 ошибку, при которой несколько последних символов плавающего элемента могут дублироваться и вылезти на блок, очищающий (закрывающий) флоаты. Есть несколько решений:

    • применить ко всем плавающим элементам display: inline;
    • применить margin-right: -3px к последнему плавающему элементу (если вы заглянете в исходники, создаваемые генератором CSS-макетов, то найдете, что в большинстве из них для блока сайдбара используется данное правило, как раз для решения этого бага);
    • поместить комментарий в самом конце плавающего блока, например: <!-- Здесь комментарий -->;
    • поместить пустой <div></div> в самом конце плавающего блока.
  6. Используйте только тег <a> для кликабельных элементов и элементов, использующих :hover.

    Эффект с помощью псевдокласса :hover в IE6 работает только для тега <a>. Также этот тег необходимо использовать для контроля с помощью JavaScript-виджетов, чтобы он был управляем с помощью клавиатуры. Есть несколько альтернативных вариантов, но тег <a> является более надежными, чем большинство решений.

  7. Используйте !important или современные селекторы.

    Все еще возможно написать CSS-код конкретно под IE, не прибегая к хакам или условным комментариям. Например, минимальная высота реализуется следующим образом:

    #element {
    	min-height: 20em;
    	height: auto !important; /* понимают все современные браузеры */
    	height: 20em; /* IE6 неправильно использует данное значение */
    }
    

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

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

    #element {
    	min-height: 20em;
    	height: 20em;
    }
    /* IE6 проигнорирует это */
    #element[id] {
    	height: auto;
    }
    
  8. Избегайте процентных размеров.

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

    body {
    	margin: 2% 0 !important;
    	margin: 20px 0; /* только IE6 */
    }
    
  9. Тестируйте раньше и тестируйте чаще.

    Не прекращайте тестировать в IE6 до тех пор, пока ваш сайт не будет завершен, иначе проблем будет еще больше, и это займет больше времени на исправление. Если ваш сайт корректно работает в FireFox и IE6, то почти наверняка он работает и в других браузерах.

  10. Осуществляйте рефакторинг вашего кода.

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

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

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

Дополнения к списку приветствуются.

Комментарии (58)

  1. Распространенная проблема также — это padding в ие6, — при увеличении padding блока, размер блока во всех браузерах увеличивается (кроме ие), таким образом приходится наблюдать уменьшенный блок в ие6 (т.к. был уменьшен поскольку паддинг возвратит его оригинальный размер). Хотелось бы на эту часто замещаемую проблемку тоже вменяемый ответ услышать

    • Эта проблема наблюдается, когда используется типа документа «HTML 4.01». Используйте «XHTML 1.0» и padding во всех браузерах будет одинаковый.

      • Да нет, я как раз всегда XHTML 1.0 использую, все равно иногда бывает, сейчас даже специально посмотрел.

        • Тогда странно. Я с подобным ни разу не сталкивался. Можете пример показать?

          • Блин, я уже переисправлял все — сейчас во всех браузерах нормально. Верстаю частенько, если как-нибудь еще встретится выложу.

            • Опачки, выцепил. Гляньте, даже просто ради интереса, да и сами же сталкиваемся иногда, у меня опыта пока не много, может я что не так делаю:

              (это выдрано из Joomla 1.5)
              сам код (от ctrl+u)

              <?xml version="1.0″ encoding="utf-8″?><!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html
              xmlns="http://www.w3.org/1999/xhtml»
              xml: lang="ru-ru"
              lang="ru-ru"
              dir="ltr"
              >
              <head>
              <link href="/mysite/templates/mysite/css/template.css" rel="stylesheet" type="text/css" media="all" />
              </head>
              <body>
              <div id="content">
              <div id="content_top">
              </div>
              <div id="content_body">
              </div>
              </div>
              </body>
              </html>

              CSS:

              #content_top {
              width: 702px; /*ширина с учетом паддинга — 702*/
              height: 36px;
              padding-top: 17px;
              padding-left: 66px; /он самый собственной персоной/
              border: 1px solid;
              }
              #content_body {
              width: 770px; /*оригинальная ширина — 770*/
              height: 36px;
              border: 1px solid;
              }

  2. Большое спасибо за информацию, действительно удобно в одном месте читать.

    Для себя два пункта увидел новых, значит стал два пункта эрудированней чем час назад))

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

  3. Спасибо за полезные советы в работе с IE6, уж очень я намаялся с ним.
    У меня проблема появилась после того, как я создал дополнительную страничку на сайте с текстом на бэкграунде, а у нашего дизайнера как раз стоит этот злое… й IE, так вот, текст в осле был увеличен на 2 пункта, чем в остальных браузерах (8 осел справился с задачей).
    Я использовал параметр текст

  4. Спасибо за статью, очень нужные вещи написаны. Как работал на одним проектом, думал вообще отказаться от IE6 ан нет, щас попробуем переписать стили

  5. Довольно часто решить какой-либо баг в IE6 помогает одновременное использование правила position: relative и height:1%.

    Эта фраза спасла меня от виселицы. Огромное спасибо! :)

  6. У меня может кто-то исправлял баг. Подскажите где конкретно приписать правила описанные в пункте «5».

  7. Спасибо за совет. Попытаюсь решить эту проблему.

  8. ИЕ6 по статистике уже использует в среднем в мире менее 5% пользователей. Тем не менее это наиболее популярный браузер из всех устаревших, которые не соответствуют современным стандартам, требованиям и возможностям.
    Но вместо того, чтобы отображать пользователям кривой сайт с ошибками, или повышать стоимость сайта из-за траты времени на верстку под ие6 (а особенно не у очень опытных разработчиков это занимает очень много времени), можно отобразить предупреждающее окошко пользователю, о том, что его браузер очень устарел. Во всяком случае пользователь будет в курсе дела.
    Даже если и добиться приемлимого вида сайта для ие6, он не может реализовать все, что могут современные браузеры и никогда не сможет, потому что у этого браузера есть новые версии для их реализации.
    Я пользуюсь скриптом от этого сайта ie6no. Недавно видел, что заведен проект на google code.
    Хотя, думаю, в свое время этот браузер был все-таки неплох.

  9. Спасибо огромное за статью))) Ток что открываю готовый сайт в IE6 и прихожу в ужас… Ну думаю всё, ща часа 3 сидеть исправлять буду. Наткнулся на статью и увидел тут «применить ко всем плавающим элементам display: inline;»
    Одна минута и всё отлично как и должно было быть… осталось ток с картинками разобраться)))

  10. Сверстал страницу и с отображением в разных браузерах все ок, но вот в IE6 при скролле страница иногда провоцирует вылет браузера. Может кто че подскажет.

  11. спасибо за советы! у меня заработало))

  12. Здравствуйте Dimox! у меня такая проблемка с IE6 пример

    <div class="sidebar">
       <div class="section">
          <ul>
             <li></li>
             <li></li>
          </ul>
       </div">
    </div>
    

    В IE6 смотрел через iedeveloper toolbar показывает что селектор класса применен к html тэгу, но все свойства содержащиеся в селекторе проигнорировал блок так остался стоять на весь wrapper со свойствами по умолчанию от ie6. Еще смотрел через firebug lite в нем вообще показывает: unknown {outline:0} в нем даже селектор не применен типа просто блок без атрибутов, Dimox заранее вам благодарен за любой ответ

  13. «трабл у некоторых дочерних элементов в IE6 часто возникает, когда у родителя установлен паддинг»
    А что именно за трабл?
    У меня возникла проблема: когда у блока wrapper свойство padding больше определенного значения, абсолютноспозиционированный блок (относительно wrapper-a который позиционируется) исчезает в IE6. И haslayout не помогает…

  14. height: 1%; очень помогло в IE6, на Wordpress версия 3.2.1,
    меню съезжало вниз, в шаблоне по умолчанию, в файле style. css добавил:
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    height: 1%;
    }
    и заработало, почти как надо :)

  15. Спасибо автору!

  16. Добрый день, есть проблема, контент во всех браузерах находится по центру. В 6, 7 ie он же прилипает к левому краю так не понимает свойство margin: 0 auto. Подскажите какие есть способы решения этой проблемы? сп.