Самая полная шпаргалка для IE6 или как исправить 25+ ошибок Internet Explorer

Перевод: Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
Автор: Benjamin

Лучшая практика по «утрясанию дел» с Internet Explorer 6 — отказаться от его поддержки.

Стоп. Хорошо, я чувствую Ваше огорчение. Вы веб разработчик и Вы готовы рвать на голове волосы, потому что вынуждены поддерживать Internet Explorer 6, или скажем более корректно — IE6 не хочет «дружить» с Вами. Вы тратите на это часы, но Вы не можете выправить макет своей верстки. Сочувствую. Я могу Вам помочь.

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

Я «перевернул» кучу ресурсов в Интернет и включил некоторые из моих собственных исправлений для IE6 и теперь я собрал все это вместе в одной шпаргалке/описательном руководстве, как единый источник для того, кто хочет «подружиться» с Internet Explorer 6. Где было возможно, я улучшил решение предлагая более понятный и корректный вариант вместо «кривого» хака. Также я постарался корректно ссылаться на первоисточники, но иногда решения были настолько растиражираваны в Интернет, что найти их начальные источники было очень затруднительно. Если Вам попадется отсутствующая ссылка на первоисточник или если я пропустил какой-либо баг или исправление, пожалуйста свяжитесь со мной и дайте знать, я буду постоянно обновлять эту страницу.

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

Содержание

Раздел Баг/Фикс/Лучшее решение
Стратегии
Как отделить IE6
Изображения
Макет
Списки
Поведение
JavaScript
Разное
Бонус ресурсы

Стратегии

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

Содержание | Наверх

Удельный вес IE6

В соответствии с удельным весом, текущий процент (Август 2009) пользователей IE6 составляет 25.25% (прим. hb: Октябрь 2010 — 15,55%), но по другим источникам этот процент намного меньше 18.1%. Как говорит статистика, мы наблюдаем тренд на снижение. Однако, действительно значимой статистикой будет статистика Вашего собственного сайта. Если у Вас уже есть аналитика по трафику для Вашего сайта, служит ли она оправданием тому, что стоит делать поддержку IE6? Оперируя терминами бизнеса: каково соотношение цена/польза для времени и денег потраченных на разработку под IE6 против того, что-бы вовсе бросить его поддержку? Можете ли Вы сделать бизнес план по поддержке постепенно уходящего IE6?

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

Содержание | Наверх

Планируйте свой дизайн и делайте все просто

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

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

Содержание | Наверх

Используйте правильный doctype

Отказ от использования правильного (или какого-либо) doctype вызовет включение режима совместимости и будет препятствовать правильному отображению вашей страницы во всех браузерах. Используйте один из следующих doctype: HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional или XHTML 1.1

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Содержание | Наверх

Проверяйте ваш код

Я слышал утверждение от нескольких людей, что у проверки кода на ошибки нет никаких отношений с работающим продуктом, но я не покупаю такие продукты. Валидация действительно не настолько важна во многих случаях и занимает всего несколько минут на выполнение. Несколько потраченных минут на валидацию вашего XHTML и CSS может принести пользу для всех браузеров, не только для IE6. Валидация позволяет быть уверенным в устранении проблем с последующей совместимостью и снижает цену на поддержку в будущем. Минимальное и достаточное требование — проверяйте Ваш XHTML. Единственная причина по которой можно проигнорировать этот пункт — использование преимуществ некоторых свойств CSS3 в браузерах, которые могут их поддерживать.

Содержание | Наверх

Сперва разрабатывайте для браузеров совместимых со стандартами

Так-же как и с проверкой вашего кода, вы избавитесь от головной боли, если первым делом будете производить верстку для браузеров поддерживающих стандарты, таких как Firefox, Opera, Safari и Chrome и затем подстраивать ее для несовместимых браузеров, таких как IE6 и IE7. В следствии того, что совместимые браузеры отображают информацию в той или иной мере одинаково, вы сможете сосредоточиться на «особенностях» Internet Explorer’а. Используя такой подход к процессу верстки, он сможет помочь в будущем улучшать ваш код, так как дает надежную основу и если вы отмечаете ваши поправки, вы сможете безболезненно удалить их, когда поддержка таких браузеров более не потребуется.

Содержание | Наверх

Использование прогрессирующих улучшений

Прогрессирующие улучшения означают то, что базовая функциональность всегда доступна для всех пользователей до добавления в проект глянца. В общем, термин прогрессирующие улучшения указывает на то, что веб приложения должны работать без JavaScript и с использованием JavaScript добавляться: анимация, Ajax эффекты и т.п., но когда это говорится по отношению к Internet Explorer 6, принцип прогрессирующих улучшений может так-же применяться касательно CSS3 (или даже ко многим частям CSS2), HTML5 и другим веб протоколам, которые IE6 не поддерживает.

В некоторых случаях, это просто может стать невозможным, когда вы пытатесь донести все свои умения до всех пользователей всех браузеров, в особенности тех, кто использует Internet Explorer 6. Используя стратегию прогрессирующих улучшений будьте уверены, что такие пользователи получают хотя-бы минимальные возможности при работе с вашим сайтом или веб приложением.

Еще о прогрессирующих улучшениях

Содержание | Наверх

Используйте правило обнуления CSS

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

Простое обнуление

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}

Популярные CSS «обнуляторы»

Содержание | Наверх

Используйте JavaScript фреймворк

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

Список некоторых, самых популярных фреймворков:

Конечно существует множество других фреймворков и еще большее количество появляется, но их список не для сегодняшнего дня. Из тех, что в списке я люблю, использую и искренне рекомендую MooTools, если вы знакомы с JavaScript. Если Вы новичек, моей рекомендацией стал бы jQuery.

Содержание | Наверх

Используйте JavaScript IE Fix

В Интернет «мелькают» несколько JavaScript решений, которые заставляют Internet Explorer работать как браузер поддерживающий стандарты. Если Ваша целевая аудитория имеет достаточно высокий процент пользователей IE с включенным JavaScript, Вы можете попробовать использовать скрипт Dean Edwards’ IE7 или другие аналогичные скрипты.

Содержание | Наверх

Как делать отладку в IE

Internet Explorer «славится» своей нелюбовью к отладке, но существует несколько инструментов позволяющих облегчить жизнь разработчиков. Как говорилось ранее, перво-наперво начинайте работать с браузерами поддерживающими стандарты. Firebug и Web Developer Toolbar прекрасные дополнения для Firefox, которые косвенно помогут содействовать или предугадать в исправлении многих ошибок для IE. Если Вы хотите получить всю мощь Firebug в других браузерах, Firebug Lite будет доступен Вам как апплет для браузера.

Для тестирования различных версий Internet Explorer, существует пара хороших вариантов если мы не рассматриваем вариант с виртуальной машиной, IE Collection и IETester, оба из которых бесплатны (но все еще имеют недоделки). Производители IETester так-же предлагают DebugBar, плагин для IE, который бесплатен для персонального использования, но требует коммерческую лицензию после 60-ти дневного использования.

Содержание | Наверх

Как отделить IE6

Первый шаг в деле «уживания» с Internet Explorer 6 возможность отделить его так, что-бы какие-либо изменения в коде отражались только на IE6 и ни на каких других браузерах. Для этого есть несколько путей для IE6: условное комментирование, селекторы CSS, и JavaScript. Мы рассмотрим каждый из этих методов.

Содержание | Наверх

Использование условного комментирования для Internet Explorer

Microsoft поддерживает условное комментирование, как путь включения кода для определенной версии Internet Explorer. В блоке условного комментирования может быть размещенно что угодно, включая разметку, JavaScript, файлы JavaScript, CSS и внешние таблицы стилей. Условные комментарии работают так, что Вы можете поставить условием срабатывания для них конкретную версию Internet Explorer или любую версию ниже или выше определенной.

Синтаксис такого комментирования следующий:

Это сообщение появится для всех браузеров.

Это сообщение появится для всех браузеров.

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

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

Содержание | Наверх

Как отделить IE6 с помощью селекторов CSS

Если Вы не хотите использовать условные таблицы стилей, селекторы CSS это еще один способ отделения IE6. Internet Explorer 6 не поддерживает селекторы потомков. Сперва Вы делаете CSS определения для IE6 и затем используете селекторы потомков для «скармливания» CSS определений браузерам IE7+ и всем современным браузерам.

Сперва HTML:

Some Header Text Here

Теперь CSS:

/*Эта строка для IE6*/
.content {color:red;}

/*Эта строка для всех других, используется синтаксис селекторов потомков*/
div>p .content {color:blue;}

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

Еще немного для чтения

Содержание | Наверх

Как использовать JavaScript для определения IE6

Если Вы хотите определять IE6 используя JavaScript, но не хотите использовать условные комментарии, делайте так:

//Чистый JavaScript, без фреймворка - ЗАМЕТКА: этот код должен быть "повешан" на событие onLoad или после того, как загрузится body, иначе возникнет ошибка
if(typeof document.body.style.maxHeight === "undefined") {
alert('IE6 Detected');
}

//Синтаксис MooTools (для IE7, используется trident5)
if (Browser.Engine.trident4) {
alert('IE6 Detected');
}

//Синтаксис jQuery - Заметим, что от метода browser, в настоящее время, отказываются в пользу метода support
if (($.browser.msie) && ($.browser.version == "6.0")){
alert('IE6 Detected');
}

Еще немного для чтения

Содержание | Наверх

Изображения

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

Содержание | Наверх

Альфа прозрачность PNG в IE6

Один из самых печальных аспектов Internet Explorer 6, это невозможность поддержки прозрачности для высококачественных изображений и трудности в реализации эффектов связанных со слоями. Существует несколько JavaScript решений, которые я предлагаю ниже, но ни одно из них не предлагает использование CSS спрайтов, за исключением Alpha версия Twin Helix’s IE6 PNG Fix.

Наипростейшее решение, это сохранение изображений как PNG8 файлов с включенным Альфа каналом прозрачности. Если Вы используете Adobe Fireworks, Вы можете сделать это выбрав Save As > Save as type > Flattened PNG > Options > Alpha Transparency. Если Вы испольуете какой-либо тип заливки, Вы можете выбрать Dither для получения градиента максимально возможного качества. Сохранение как PNG8 с Альфа каналом прозрачности будет отображать полупрозрачность областей изображений как 100% прозрачность, так как здесь нет различных уровней полупрозрачности.

Другой способ, это добавить специфичный для IE фильтр в таблице стилей CSS предназначенный только для IE6. Aaron Baxter объясняет эту технику в учебнике на своем блоге.

PNG корректировки через JavaScript

Содержание | Наверх

Закругленные углы в IE6

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

Содержание | Наверх

Как разрешить проблему с мерцанием фоновых изображений

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

document.execCommand("BackgroundImageCache",false,true);

Другие решения

Содержание | Наверх

Макет

Ошибки разметки IE6 это его самая печальная сторона, в особенности если Вы имеете дело с однопиксельным дизайном и он работает во всех браузерах, но не в Internet Explorer 6. Эта секция посвящена этим ошибкам и тому как с ними бороться.

Содержание | Наверх

Понимание hasLayout

Число багов IE6 и ошибок рендеринга могут быть приписаны к проприетарному концепту от Microsoft hasLayout. Коротко объясняется, что hasLayout переключает какой-либо элемент в заданные размеры, задаваемые через height или width. Отсутствие этих определений приводит к множеству багов, которые Вы несомненно будете иметь при работе с IE6.

Вместо того, что-бы вдаваться в длинное описание hasLayout, я просто отшлю Вас к превосходному учебнику от John Gallant и Holly Bergevin, который детально опишет когда и как нужно задумываться о hasLayout.

Еще немного для чтения

Содержание | Наверх

Бокс модель IE6

Если в Internet Explorer 6 включен режим совместимости, IE6 будет использовать старую реализацию боксовой модели от Microsoft, которая исключает границы и отступы из общей ширины элемента. Общая стратегия в деле с багами заключается в устранении переключения в режим совместимости используя корректный doctype или отказ от применения свойства width к элементам которые уже имеют border или padding. Здесь может быть применено и условное комментирование, но это уже на крайний случай.

Еще немного для чтения

Содержание | Наверх

Минимальная высота

IE6 игнорирует свойство min-height и вместо него использует height как минимальную высоту. Спасибо Dustin Diaz, раскопавшей фикс через использование !important, который IE6 переопределяет, а другие браузеры нет. Это-же решение работает и для min-width.

/*Работает во всех браузерах*/
#container {min-height:200px; height:auto !important; height:200px;}

Другое решение, использование CSS селекторов для достижения такого-же эффекта, но другим путем.

/*Для IE6*/
#container {min-height:200px; height:200px;}

/*Для всех других браузеров*/
html>body #container { height:auto;}

Содержание | Наверх

Максимальная высота

К сожалению, один единственный путь для достижения max-height эффекта в IE6 это использование специфичного для IE CSS выражения, которое эквивалентно запуску JavaScript в таблице стилей, или использование собственно JavaScript. Из этих двух я рекомендую использовать решение с JavaScript, так как запуск JavaScript через CSS отъедает много ресурсов и может привести к «падению «браузера. Оба решения не будут работать при выключенном JavaScript. Заметим, что это решение годится только для IE6, все остальные браузеры поддерживают max-height.

JavaScript

//Простой JavaScript, измените ID и размеры под Ваши.
var container = document.getElementById('container');
container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";

//Альтернативная функция. Замечание: для динамического рисайзинга, подцепите к событию window resize
function setMaxHeight(elementId, height){
var container = document.getElementById(elementId);
container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
}

//Пример использования
setMaxHeight('container1', 200);
setMaxHeight('container2', 500);

Содержание | Наверх

100% высота

Что-бы элемент достиг 100% высоты в IE6, Вам необходимо определить фиксированную величину высоты его родительского элемента. Если Вам необходимо развернуть на всю высоту размер страницы, примените height:100%; к элементу html и body.

/*100% высота родительского элемента для IE6*/
#parent {height:500px;}
#child {height:100%;}

/*100% высота страницы для IE6*/
html, body {height:100%;}
#fullLength {height:100%;}

Содержание | Наверх

Минимальная высота

Аналогично max-height и max-width, min-width не поддерживается IE6. Есть два решения, применить экстра разметку, что-бы достичь желаемого или использовать JavaScript.

//Простой JavaScript, измените ID и размеры под Ваши.
var container = document.getElementById('container');
container.style.width = (container.clientWidth < width) ? "500px" : "auto";

//Альтернативная функция. Замечание: для динамического рисайзинга, подцепите к событию window resize
function setMinWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
}

//Пример использования
setMinWidth('container1', 200);
setMinWidth('container2', 500);

Содержание | Наверх

Максимальная ширина

Есть только один путь реализовать max-width в IE6, и он идет через использование JavaScript.

JavaScript

//Простой JavaScript, измените ID и размеры под Ваши.
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";

//Альтернативная функция. Замечание: для динамического рисайзинга, подцепите к событию window resize
function setMaxWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
}

//Пример использования
setMaxWidth('container1', 200);
setMaxWidth('container2', 500);

Содержание | Наверх

Двойной Margin для Float элементов

Internet Explorer 6 некорректно удваивает поля для плавающих элементов добавляя такое-же поле к той стороне, в которую данный элемент уплывает. Steve Clason победил этот баг, с помощью простого добавления display:inline; к плавающим элементам.

/*Баг двойного margin в IE6*/
.floatedEl {float:left; margin-left:100px;}

/*Корректировка*/
.floatedEl {float:left; margin-left:100px; display:inline;}

Содержание | Наверх

Как очистить плавающие элементы

Если Вы пытаетесь обернуть плавающий элемент в контейнер, но контейнер не желает делать это правильно, обязательно установите height или width свойства контейнера в значения отличные от auto и также добавьте свойство overflow с одним из трех следующих значений: auto, hidden, или scroll. Alex Walker впервые написал об этой технике и отдал должное Paul O'Brien за идею.

Пример HTML

Пример CSS

#container {border:1px solid #333; overflow:auto; height:100%;}
#floated1 {float:left; height:300px; width:200px; background:#00F;}
#floated2 {float:right; height:400px; width:200px; background:#F0F;}

Еще немного для чтения

Содержание | Наверх

Падение плавающих элементов

Падение плавающих элементов случается в том случае, когда содержимое плавающего контейнера превысит его заданную ширину. В Firefox, IE7 и других браузерах, содержимое будет просто обрезано, но в Internet Explorer 6, контейнер будет игнорировать заданную ширину и раздвинет ее до размеров содержимого. Если какие-нибудь другие элементы будут выплывать далее за контейнером, они опустятся ниже него.

Баг с падением плавающих элементов относится к той ошибке IE6 у которой нет правильного решения, по крайней мере из тех, что я смог найти. Ее можно обойти через overflow:hidden; или overflow:scroll;, но скрытое содержимое будет все-равно доступно и скроллируемое значение может поломать верстку. Даже решение с JavaScript не выглядит сподручным из-за проблем с миграцией. Лучшее решение, которое я могу посоветовать, что-бы вовсе устраниться от таких проблем, либо использовать фиксированную верстку, либо сознательно контролировать размер содержимого.

Еще немного для чтения

Содержание | Наверх

Баг гильотины

Баг гильотины определенно очень неприятная ошибка IE6 (и IE7). Он обрезает содержимое в плавающем и "неочищенном" элементе, который больше элемента своего контейнера со ссылками имеющими разные hover стили и с неплавающим содержимым идущим после плавающего, при наведении на ссылку мыши. Звучит непонятно? Не беспокойтесь, этот баг и его решение хорошо задокументированы народом на Position Is Everything.

Несмотря на трудности вызываемые багом, решения довольно просты. Первое касается добавления дополнительного элемента в конец контейнера и установки для него свойства clear:both;. Вторая корректировка вызывается через hasLayout в элементе содержащем ссылки которые вызывают эффект гильотины. Это может быть сделано простым добавлением определения height:1%;.

Еще немного для чтения

Содержание | Наверх

Баг с 1px интервалом для абсолютно спозиционированных элементов

Этот баг встречается в IE6 (в IE7 его исправили) из-за ошибки округления. IE6 будет добавлять 1-пиксельный интервал к правой или к нижней границе между абсолютно спозиционированным элементом и относительно спозиционированным родителем, если размер родителя определяется нечетным числом. Единственное реальное решение для этого бага, определение четной высоты и ширины для родительского элемента. Прискорбно, но для резиновой верстки нет реально работающего решения. Paul O'Brien довольно детально объясняет эту проблемы здесь.

Содержание | Наверх

Баг 3px интервала для плавающих элементов

Так-же называемый 3-х пиксельный баг текстового подталкивания, этот баг появляется в IE6 когда текст граничит с плавающим элементом. IE6 добавляет 3 пиксельное поле между элементом и текстом, даже если в элементе ничего не определено. У Stu Nichols есть определенно элегантное решение этой проблемы.

Содержание | Наверх

IE и свойство z-index

Если Вы используете свойство z-index на спозиционированном элементе в Internet Explorer 6 или 7, стековый индекс будет обнулен в ноль, вызывая ошибку отрисовки. Решение, указывается некоей персоной под ником baker, и заключается в добавлении наибольшего z-index к родительскому элементу. В некоторых случаях, родительскому элементу также необходимо назначить свойство position:relative.

Еще немного для чтения

Содержание | Наверх

Баг с Overflow

Jonathan Snook документирует и решает баг с overflow, который случается, когда свойство overflow установлено на содержащий элемент и у относительно спозиционированного потомка высота больше высоты родителя. В обоих IE6 и IE7, вместо следования согласно объявленного overflow, больший элемент потомок будет всплывать поверх своего родителя. Где выход? Добавить position:relative к контейнеру.

Содержание | Наверх

Списки

Очевидно, что существует несколько специфичных для IE багов связанных со списками. Здесь перечислены некоторые из них с соответствующими решениями.

Содержание | Наверх

Проблема с шириной элементов горизонтальных списков

Если Вы пытаетесь построить список элементов ввиде горизонтального меню и применяете свойство float к элементу <li>, Вы увидите, что каждый элемент меню неприятно вытянется до 100% ширины элемента его содержащего, делая меню элементов ввиде вертикального стека, а вовсе не горизонтального. И снова, эта проблема приключается только в IE6. Решение? Спасибо Rofikul Islam Shahin, оно простое. Просто добавьте float:left; к тегу <a>, так-же как добавляли его к <li> и Ваше меню отбразится так, как Вы задумывали.

Содержание | Наверх

Лестничный баг

Лестничный баг встречается когда содержимое элементов <li> плавает и Вы пытаетесь создать горизонтальный список (часто используется для навигации). Каждый элемент будет стремиться встать ввиде вертикального стека или будет всплывать в лестничном виде.

Каково-же решение? Их два: применить свойство float к <li> или применить display:inline; к элементу <li>.

Содержание | Наверх

Баг вертикальной разбивки или баг пробельных символов

При создании вертикального списка состоящего из элементов <li> с блоковым потомком, Internet Explorer 6 (и возможно в некоторых случаях IE7) будет ошибочно добавлять вертикальные пробелы между элементами списка. Существует несколько решений этой проблемы, но давайте сперва быстренько взглянем на пример.

Пример HTML


Пример CSS

ul {margin:0; padding:0; list-style:none;}
li a {display:block; padding:0.5em; background:#ddd;}

Корректировки
Jon Hicks получил благодарности за устранение этой проблемы с помощью установки свойств float и clear для якоря в списке

ul {margin:0; padding:0; list-style:none;}
li a {display:block; padding:0.5em; background:#ddd; float:left; clear:left;}

Другое решение - использовать hasLayout с определением height или width на якорных тегах (или каком-нибудь блоковом потомке).

ul {margin:0; padding:0; list-style:none;}
li a {display:block; padding:0.5em; background:#ddd; width:100%;}
/* height:1%; работает также */

Элементу <li> также может быть назначено определение display:inline;.

li {display:inline;}

Другой интересный фикс заключается в размещении пробела между последним символом текста в блоковом потомке и закрывающимся тегом.


Еще корректировки и объяснения

Содержание | Наверх

Поведение

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

Давайте посмотрим на некоторые из множества поведенческих проблем с Internet Explorer 6.

Содержание | Наверх

В IE6 нет Hover состояния

Для IE6 не существует поддержки hover состояния для каких-либо элементов кроме тэга якоря с атрибутом href или элементов для которых такой тег взаимодействует с контейнером. Это утверждение жестко ограничивает использование эффектов mouseover в IE6, но все-таки для этого есть несколько лазеек.

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

Большинство фиксов hover ограничения для IE6 используют либо проприетарное свойство поведения Microsoft CSS или решение с JavaScript, обычно через фреймворк JavaScript или через скрипт IE6 fix.

Содержание | Наверх

Реализация тега Canvas в IE

Ни одна из версий Internet Explorer (включая IE7 и IE8) не поддерживает тег HTML5 canvas потому что Microsoft предпочитает пропихивать вместо него свой VML. Однако, есть несколько JavaScript решений эмулирующих тег canvas для IE.

Canvas решения и ресурсы

Содержание | Наверх

IE6 баг рисайзинга

Emil Stenstr?m раскопал решение для бага с рисайзингом IE6. В общем, где отцентрирован элемент body и реализована фиксированная верстка, любой относительно спозиционированный элемент внутри него станет фиксированным если страница изменит размеры и не обновится. Решение Emil'я простое и элегантное: добавить position:relative; к body элементу.

Содержание | Наверх

JavaScript

Internet Explorer 6 также страдает от несметного числа ошибок в деле интерпретирования JavaScript. У меня нет никакой возможности описывать все баги JavaScript в IE6, но я расскажу о нескольких, наиболее часто встречаемых из них и о том, как их исправить.

Содержание | Наверх

Ошибка: Ожидался Identifier, String или Number

Internet Explorer не терпит недостаточно оформленный JavaScript код и часто выдает ошибку, "Expected Identifier, String, Or Number" если в конце массива элементов присутствует замыкающая запятая, другие браузеры более снисходительны к этому. Удалив запятую, Вы обычно избавляетесь от этой ошибки.

Содержание | Наверх

Утечки памяти IE JavaScript

Из-за того, что Internet Explorer использует собственный менеджер памяти, он может быть подвластен проблеме с утечкой памяти, так как неправильно ее освобождает во время работы с JavaScript. Douglas Crockford написал подробный отчет о предотвращении утечек памяти для JavaScript в Internet Explorer. Еще одна страница для этого раздела, написана Hedger Wang и ее так-же стоит прочитать.

Содержание | Наверх

Разное

Этот раздел специально выделен для нескольких багов Internet Explorer 6 и их решений, которые не вошли в предыдущие.

Содержание | Наверх

Баг с задвоенными символами

Когда IE6 натыкается на любой тип спрятанных элементов, таких как комментарии или элементы со свойством display:none; внутри плавающих элементов, он может задваивать символы. Проблема замечательно описана на Position Is Everything, и решение видится довольно простым: применить display:inline; к плавающему элементу, который предшествует скрытому элементу.

Содержание | Наверх

Favicons в IE

Favicon сокращение от Favorites Icon ссылающееся на изображение из 16x16 пикселей, которое появляется на какой-либо странице, которую Вы сохранили в своих закладках. Существует два способа заставить его появиться. Первый - просто сохранить изображение как файл favicon.ico в корне Вашего сайта. Internet Explorer и другие браузеры будут автоматически искать его и отображать. Второй метод разместить следующий HTML код в head секции Вашего документа (после загрузки изображения):


Стоит заметить, что изображение favicon будет закешировано и не будет меняться пока Вы не очистите кеш Вашего браузера и не обновите его один или несколько раз. Если Вы хотите обновлять его автоматически для всех Ваших пользователей, установите "expire параметры" в заголовке ответа этого изображения.

Еще к прочтению

Содержание | Наверх

GZip In IE6

Некоторые версии IE6, в особенности после обновления XP SP2, могут иметь проблемы с файлами пропущенными через GZip сжатие. К счастью, Seb Duggan нашел решение бага IE6 GZip используя ISAPI_Rewrite для Apache.

Решение Seb'а - поместить следующий код в httpd.conf файл расположенный в директории с установленным ISAPI_Rewrite:

RewriteEngine on

RewriteCond %{HTTP:User-Agent} MSIE\ [56]
RewriteCond %{HTTP:User-Agent} !SV1
RewriteCond %{REQUEST_URI} \.(css|js)$
RewriteHeader Accept-Encoding: .* $1

Содержание | Наверх

Бонус ресурсы

Хотя это и достаточно длинный список багов и исправлений для Internet Explorer 6, он совсем не исчерпывающий. Если Вы не смогли найти в нем что-то, посмотрите на эти дополнительные ресурсы.

Содержание | Наверх

Статья закончилась, но общение продолжается:
12 комментариев

12 комментариев на статью: “Самая полная шпаргалка для IE6 или как исправить 25+ ошибок Internet Explorer”

  1. Денис Радченко:

    Слава богу, IE6 сдох. Если не писать веб интерфейсы для госструктур, зачем фиксить баги IE6?

  2. Julliet:

    По поводу min-height. Я решаю это несколько проще…
    а именно

    #block { min-height: 700px;
    _height:700px;}

    _height — как раз для IE6. И работает без никаких java-скриптов. Блок тянется, но и меньше 700 пикселей (в примере) — не будет.

  3. Ирина:

    Спасибо большое за такое собрание багов ие6, давно искала шпаргалку, а тут такой подарок

  4. Евгений:

    Спасибо большое за такой полезный материал.
    Очень помогло с «лестничным багом» в меню

  5. Айдар:

    отличная подборка! даже добавить ничего серьезного пока нет :)
    сюда же можно отнести проблему с отступами в кнопках: http://htmlworld.ru/ie_button_padding/

  6. Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs | Jim?blog:

    […] translation, vicZen has translated the article into Chinese, and Dennis Bri has translated it into Russian. If you’ve translated this article into another language, please let us know so that we can […]

  7. Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs - blog.topwebdevelop.com:

    […] translation, vicZen has translated the article into Chinese, and Dennis Bri has translated it into Russian. If you’ve translated this article into another language, please let us know so that we can […]

  8. К.Д. Кузнецов » Blog Archive » Ох уж этот IE 6:

    […] http://handynotes.ru/2010/10/cheatsheet-25-plus-ie6-fix.html […]

  9. саша:

    А как зайти в javascript в internet explorer,а то у меня возникает ошибка: «Предполагается наличие идентификатора, строки или числа» в интернете написано что надо убрать запятую В моем случае ошибка «Предполагается наличие идентификатора, строки или числа» в IE на уровне javascript возникла из-за того, что данный браузер «щепетильный» и предполагает, что в конце списка не должно быть запятых.

    javascript в котором возникает ошибка
    1 default_settings = {
    2 older_link: «a.blog-pager-older-link»,
    3 }

    javascript в котором НЕ возникает ошибка
    1 default_settings = {
    2 older_link: «a.blog-pager-older-link»
    3 }
    Ярлыки: IE, javascript я новичок напишите если не трудно по шагова как зайти в javascript в internet explorer.спасибо.

  10. Лана:

    Можно использовать для прозрачности фотошоповский фильтр alphapng. Бесплатный. Позволяет сразу в фотошопе сохранить в png8 картинку для проблемного IE

Ответить

Последние комментарии
  • вася https://www.youtube.com/watch?v=odg4KJVKnqE Как обманывают...
  • likileil Какая у вас дискуссия тут... и так: URI — Uniform...
  • SEO admin Благодаря автору смог включить у себя сжатие! Век...
  • tiandrey >URI = URL или URI = URN или URI = URL + URN Ты...
  • tiandrey >Нет ничего лучше, чем конкретный пример: >URI...
  • nemezida.su а новая информация по использованию прозрачности в...
  • Лора Помогите понять, зарегестрировалась на Е-бее и именно...
Популярное
1 2 3
Рубрики