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

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

Комментарии (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. Подскажите какие есть способы решения этой проблемы? сп.