10 фиксов, решающих проблемы Internet Explorer 6
Данный пост основан на переводе интересной англоязычной статьи “10 Fixes That Solve IE6 Problems“. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью совпадает с моей точкой зрения и подтверждено моей практикой. Букв много, не пугайтесь =)
Так исторически сложилось, что браузер Internet Explorer 6, выпущенный аж 7,5 лет назад, до сих пор не дает себя забыть, все еще, к сожалению для практически любого веб-разработчика, являясь одним из самых популярных веб-браузеров. К сожалению - потому что поддержка веб-стандартов в нем далеко отличается от его следующих версий, а также других современных браузеров.
В связи с этим одной из сложностей при переходе с табличной верстки на дивовую является наличие всевозможных багов, которые вылазят в IE6 при верстке.
Следующие трюки (фиксы, исправления, рекомендации - называйте, как хотите) решают большинство багов IE6, заставляя его плясать под дудку веб-разрабочика. Причем, это вовсе не хаки и не условные комментарии, а соответствующие стандартам CSS-правила, которые сохраняют валидность CSS- и HTML-кода.
Итак…
-
Используйте DOCTYPE.
Всегда используйте запись, обозначающую тип HTML-документа (указывается в самом верху HTML-страницы). При этом тип документа Strict является рекомендуемым:
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">или (для XHTML):
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Несмотря на то, что рекомендован Strict, на практике пока довольно часто приходится использовать тип документа Transitional, как минимум по той причине, что Strict запрещает применение параметра _target, а многие используют его по привычке.
-
Применяйте position: relative.
Установка элементу position: relative решает множество проблем, особенно, если вы наблюдаете невидимые или странно выровненные блоки. При этом необходимо помнить, что все дочерние элементы с position: absolute станут позиционироваться относительно этого элемента.
-
Используйте display: inline для плавающих элементов (те, к которым применяется свойство float).
У плавающих элементов, имеющих левый/правый отступ margin, в IE6 этот отступ удваивается. Т.е. если вы указали 5px, то в IE6 он будет 10px. Применение display: inline как раз решает данную проблему.
-
Придайте элементу свойство hasLayout.
Многие проблемы рендеринга в IE6 (и в IE7) решаются путем назначения элементу свойства hasLayout. Это настройка для IE, определяющая, каким образом ограничивать содержимое и располагать его по отношению к другим элементам страницы. Установка hasLayout может иметь существенное значение, если вам необходимо превратить строчный элемент (например, ссылку) в блок или применить эффекты прозрачности.
Самый простой способ установки hasLayout - это указание CSS-свойств height или width (также может быть использован zoom: 1, однако это правило не является частью стандарта CSS). Т.е. рекомендуется устанавливать фактические размеры элемента: высоту или ширину, однако там, где это невозможно сделать, можно использовать правило height: 1%. Вот примерчик:
1
2
3
4<div class="block">
какой-то текст
<div class="absolute">это позиционируем абсолютно</div>
</div>1
2
3
4
5
6
7
8
9
10
11
12.block {
position: relative; /* для того, чтобы блок с .absolute
позиционировать относительно этого блока */
padding: 20px; /* трабл у некоторых дочерних элементов в IE6 часто
возникает, когда у родителя установлен паддинг */
height: 1%; /* вот оно, спасение для IE6 */
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
}Довольно часто решить какой-либо баг в IE6 помогает одновременное использование правила position: relative и height:1%.
-
Устранение бага с повторяющимися символами.
Хитро структурированные CSS-макеты могут вызвать в IE6 ошибку, при которой несколько последних символов плавающего элемента могут дублироваться и вылезти на блок, очищающий (закрывающий) флоаты. Есть несколько решений:
- применить ко всем плавающим элементам display: inline;
- применить margin-right: -3px к последнему плавающему элементу (если вы заглянете в исходники, создаваемые генератором CSS-макетов, то найдете, что в большинстве из них для блока сайдбара используется данное правило, как раз для решения этого бага);
- поместить комментарий в самом конце плавающего блока, например: <!–– Здесь комментарий ––>;
- поместить пустой <div></div> в самом конце плавающего блока.
-
Используйте только тег <a> для кликабельных элементов и элементов, использующих :hover.
Эффект с помощью псевдокласса :hover в IE6 работает только для тега <a>. Также этот тег необходимо использовать для контроля с помощью JavaScript-виджетов, чтобы он был управляем с помощью клавиатуры. Есть несколько альтернативных вариантов, но тег <a> является более надежными, чем большинство решений.
-
Используйте !important или современные селекторы.
Все еще возможно написать CSS-код конкретно под IE, не прибегая к хакам или условным комментариям. Например, минимальная высота реализуется следующим образом:
1
2
3
4
5#element {
min-height: 20em;
height: auto !important; /* понимают все современные браузеры */
height: 20em; /* IE6 неправильно использует данное значение /*
}IE6 не понимает min-height и неправильно переопределяет высоту auto с помощью 20em. Тем не менее, он увеличивает размер, если содержимому требуется больше места.
Другой вариант заключается в использовании современных селекторов, например:
1
2
3
4
5
6
7
8#element {
min-height: 20em;
height: 20em;
}
/* IE6 проигнорирует это */
#element[id] {
height: auto;
} -
Избегайте процентных размеров.
Проценты путают IE6. Если вы не можете точно определить размер каждого родительского элемента, лучше отказаться от использования процентов. При этом можно использовать процентные размеры в других браузерах, например:
1
2
3
4body {
margin: 2% 0 !important;
margin: 20px 0; /* только IE6 */
} -
Тестируйте раньше и тестируйте чаще.
Не прекращайте тестировать в IE6 до тех пор, пока ваш сайт не будет завершен, иначе проблем будет еще больше, и это займет больше времени на исправление. Если ваш сайт корректно работает в FireFox и IE6, то почти наверняка он работает и в других браузерах.
-
Осуществляйте рефакторинг вашего кода.
Зачастую решение багов может занять больше времени, чем переосмысление проблемы макета. Незначительные изменения в HTML и CSS зачастую являются более эффективными. Это может означать, что вы полностью откажетесь от правильного кода, но возникнет меньше долгосрочных проблем, и вы будете знать, как справиться с проблемой в будущем.
Надеюсь, что данные подсказки найдут свою аудиторию, и тем, кто не знал про вышеописанные трюки, станет значительно легче справляться с сюрпризами Internet Explorer 6.
И еще хочется добавить, что я с большинством вышеуказанных рекомендаций уже очень близко знаком и постоянно имею с ними дело. Благодаря этим знаниям, я во-первых, значительно быстрее решаю все баги IE6, чем это делал ранее, во-вторых, если раньше я параллельно при верстке держал открытыми Оперу и IE6 (и еще несколько браузеров =), чтобы исправлять баги в IE6 по ходу, то теперь я сперва полностью верстаю, открыв только Оперу, а уже после окончания верстки открываю IE6 и быстренько исправляю все найденные баги.
Дополнения к списку приветствуются.
На первый взгляд, вроде бы всё перечислил… будет очень полезным новичкам, или склеротикам типа меня, которые вечно забывают про какие нибудь мелочи при использовании хаков для ие6, так-как принципиально не люблю этот древний, 2000 года браузер. Спасибо в общем, что тут ещё скажешь.
И тебе спасибо за комментарий ;)
Да, IE6 еще тот хардкор, обычно если верстаю верстаю под нормальные браузеры, у уже потом пытаюсь допилить все то что отъехало в IE.
Под кат забыл засунуть. (:
Блог растянулся на километр вниз.
Спасибо большое!
Хотел сказать что первый совет самым важным является. Хотя во всех книжках пишут про этот параметр, но все равно забываешь его всегда вставить.
Тут у меня тоже со страницей проблемы были, в IE сужался тег , а в других браузерах наоборот расползался, так вот DOCTYPE вставил а все отлично стало везде отображаться.
Я не пользуюсь катом.
Чтобы не забывать, рекомендую использовать шаблон страницы, который будет содержать все обязательные теги и доктайп. Всегда так делал, поэтому доктайп никогда не забывал =)
предлагаю дружно отправить ie 6 на свалку истории, он свое сделал, хватит уже точить свои проекты под заранее устаревшие браузеры
Уже давно все хотят это сделать, но реальность такова, что пока это не возможно.
IE6 еще очень долго не отправится на свалку, так как им пользуется очень много людей (я знаю пример, что в одном не очень маленьком банке вообще все сидят на IE5.5). Поэтому приходится с ним считаться.
Доктайпом продолжаю по привычке пользоваться Transitional, а тестировать сразу в нескольких браузерах. Мне проще заранее устранить появляющиеся косяки в любом браузере (не только IE), чем потом думать как их устранить.
Из статьи почерпнул мало нового, но от этого она хуже не стала. Правильно, что собрали все в одном посте, хоть это и перевод.
Dimox, а в чём принципиальное различие между Transitional и Strict?
Я тоже пользуюсь Transitional и пока не жалуюсь. :)
Прочитай вот эту статью с хабра и все станет ясно: http://habrahabr.ru/blogs/webstandards/45962/
Спасибо:)
Кстати, есть свободные инвайты на хабру?
У меня там нет инвайтов.
жалко от этой заразы патч Бармина не помогает
У плавающих элементов двойной отступ появляется только если элемент изначально блочный. Попробуй img сделать плавающим и добавить отступ.
Спасибо за уточнение, не знал. Мне это нужно усвоить, а не то никак не мог понять зависимость =)
половина не работает. делайте на яве проверку и ссылку на обновление до ие7
много для себя узнал нового, еще правда не все попробовал )
Пасяб за статейку - весьма полезная! в качестве дополнения скажу, что чтобы изначально минимизировать траблы с ослом, за основу беру таблицы с ячейками, распертыми дивами.
Спасибо за статью. Хоть пользователей шестого осла становится всё меньше - пока что считаться с ним приходится (((
Да хорошая статья. Слушайте, Dimox вы можете кинуть на почту линк, на русскую статью по поводу отступов в ие6 после картинок часто пробелы какието левые появляются, или допустим если у элемента задана высота, он может быть выше если там три дива и в коде пробелы.. пока не уберешь или не задашь overflow:hidden… проблема не исчезает, думаю сталкивались с этим, а еще между строками списка вечно вылазит такое, помню там инлайн надо делатЬ. но иногда инлайн мешает.. есть ли какое решение ?
Ссылок я не знаю. Гугл в помощью, с его помощью все можно найти.
Картинки по умолчанию в ие имеют отступы, чтобы их убрать надо обнулить их в CSS: margin:0; но обнуление это работает только если имга блочная… тоесть еще ей надо поставить свойство либо float, либо display:block;. Одновременно нестоит применять эти правила если нет в том необходимости, потому что если у элемента будет margin боковой то в ие6 он удвоится. Боковые внешние отступы в ие6 при применении к ним свойства float удваиваются только у изначально блочных елементов, либо же у тех елементов которым заданно вместе с float свойство display:block.
Если есть float то элемент уже становится блочным (иногда это забывают, особенно новички)
Можете уточнить что Вы имеете ввиду? Просто даже немогу сразу придумать как может мешать display:inline флотнутому элементу…
Есть решение - по возможности меньше использовать float.
Если есть фозможность то обойтись display:inline без float, при этом в IE6, IE7 (насчет 8 неуверен, так как всегда добавляю строку чтобы 8й вел себя как 7й ) будет “инлайновый” (незнаю как назвать точнее) левый отступ на 3px больше чем у остальных браузеров, например так происходит с “лишкам” списка.
Если список обычный (не горизонтальный) то в IE6 иногда вериткальные отступы появляются - “лечится” либо li{float:left; width:100%}, но невсегда можна ставить ширину в 100%(например если есть боковые паддинги), и если жеско задавать в пикселах тоже нельзя; либо ей же li{height:1%; overflow:hidden; vertical-align:top}
По идее Америка открыта не была, но все вещи важные. Эх… Скорее бы человечество избавилось от шестого осла… А пока что :потирает руки: будем верстать ^_^
Спасибо за добрую помощь. Как раз, позарез нужна была именно эта информация. Пойду пробовать на своем сайте.
Спасибо большое за такую полезную информацию. Очень пригодилась!
применить ко всем плавающим элементам display: inline;
- Огромное спасибо! Помогло!… добрых 3 часа с ума сходил.. Проклял IE6.
Еще, чтобы избавиться от двойного отступа у блоков с float в IE6,7, можно вложить в блок с float другой блок, и от него уже делать отступы (иногда display:inline не помогает)
Распространенная проблема также - это padding в ие6, - при увеличении padding блока, размер блока во всех браузерах увеличивается (кроме ие), таким образом приходится наблюдать уменьшенный блок в ие6 (т.к. был уменьшен поскольку паддинг возвратит его оригинальный размер). Хотелось бы на эту часто замещаемую проблемку тоже вменяемый ответ услышать
Эта проблема наблюдается, когда используется типа документа “HTML 4.01″. Используйте “XHTML 1.0″ и padding во всех браузерах будет одинаковый.
Да нет, я как раз всегда XHTML 1.0 использую, все равно иногда бывает, сейчас даже специально посмотрел.
Тогда странно. Я с подобным ни разу не сталкивался. Можете пример показать?
Блин, я уже переисправлял все - сейчас во всех браузерах нормально. Верстаю частенько, если как-нибудь еще встретится выложу.
Опачки, выцепил. Гляньте, даже просто ради интереса, да и сами же сталкиваемся иногда, у меня опыта пока не много, может я что не так делаю:
(это выдрано из Joomla 1.5)
сам код (от ctrl+u)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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:
2
3
4
5
6
7
8
9
10
11
12
width: 702px; /*ширина с учетом паддинга - 702*/
height: 36px;
padding-top: 17px;
padding-left: 66px; /он самый собственной персоной/
border: 1px solid;
}
#content_body {
width: 770px; /*оригинальная ширина - 770*/
height: 36px;
border: 1px solid;
}
Не понимаю, для чего вам понадобилось это:
В этом-то как раз и заключается проблема с IE6.
Спасибо, большое! Так просто ставят - в шаблонах Joomla, с кодировкой тоже вроде проблем, после исправления, не заметил))
Большое спасибо за информацию, действительно удобно в одном месте читать.
Для себя два пункта увидел новых, значит стал два пункта эрудированней чем час назад))
Кстати, про дублирование символов замечу, что встречал также вариант когда именно комментарий вызывал дублирование символов.
Я тогда не стал вдаваться насчет расположение комментария, а просто проверил:
удаляешь комментарий - в начале следующего блока исчезают лишние, повторяющиеся с предыдущего блока символы.