10 способов побороть проблемы в IE6

http://www.sitepoint.com/blogs/2009/03/06/10-fixes-for-ie6-problems/
  • Перевод

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


Лучше всегда прописывать доктайп в заголовке каждой html-страницы, причем, строгий режим рекомендуется:

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

от себя добавлю, что недопускайте никаких сторонних символов перед доктайпом. Ни пробелов, ни переносов строки — иначе появятся странные поля у body и html

2. Установите position: relative


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

3. Применяте display:inline для плавающих блоков


Плавающие элементы с margin могут вызывать известный баг IE6 с двойным маргином.
Например, указываем маргин слева в 5px и в результате получаем 10px. display:inline исправит проблему, а CSS останется валидным

4. Установите свойство hasLayout


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

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

5. Исправляем дублирующиеся символы


Ох уж этот баг! Проявляется в списках, когда последние 1-3 симвова последнего пункта списка дублируются на новой строке. Есть несколько решений:

— используйте display:inline для плавающих элементов;
— задайте margin-right:-3px; на последний элемент в списке;
— можно использовать условные комментарии ;
— добавте пустой div в последний элемент списка (иногда, необходимо задать width:90% или другое подходящее значение для ширины;

Здесь можно подробнее ознакомиться с проблемой.

6. Допускайте только теги «a» для кликабельных и :hover элементов.


Так как IE браузер самостоятельный и альтернативно мыслящий, он не признает никакие другие теги для этих дел.
Конечно, можно использовать и другие теги в связке с java script, но лучше всего подходит.

7. Продвинутые селекторы CSS для вменяемых браузеров, a обычные для IE или используйте !important


Есть возможность писать валидный код и применят стили разделять стили для осла и других браузеров без сторонних файлов.
IE6 не понимает ‘min-height’ и неправильно переключает height: auto на 20em.

#element {
min-height: 20em;
height: 20em;
}
/* ignored by IE6 */
#element[id] {
height: auto;
}


8. Избегайте процентных значение для полей


Проценты загоняют IE в ступор. Вы можете продолжать писать размеры в процентах применяя !important для других браузеров, а для ишака в пикселях:

body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}


9. Тестируйте всегда и часто


Никогда не оставляйте верстку в IE не тестированной «на потом». Проблемы отнимут больше времени на их решение. Если верстка корректно отображается в FF и IE6, то она не развалится в других браузерах.

10. Рефакторинг


Однако, чаще намного дольше пофиксить баг, чем переписать проблемный участок заново. Более простой код HTML и простой CSS часто более эффективнее.

От себя добавлю, про популярные хаки _margin, *margin, которые понимает только IE, но код не валиден, пропагандируйте обновление браузера.

Навеяно этим. Перевод вольный.

image
Поделиться публикацией
Похожие публикации
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Комментарии 100
  • –13
    В мемориз.
    • –2
      Помимо указанных способов установки hasLayout = true можно использовать:
      position: absolute
      float: left или right
      display: inline-block
    • +6
      Вот спасибо, я к сожалению из-за лени нарушил правило «Никогда не оставляйте верстку в IE не тестированной «на потом»» и сейчас открыв IE буквально охренел.
      • –5
        position: relative зачастую может породить много глюков, например блок с ним может вести себя, как с position:fixed в блоках с прокруткой (overflow:auto) или начинать тупить с позиционированием и наложением.
        • –5
          А чтобы не было траблов с удваиванием margin'а у блока с соответствующим float, верстальщики давно привыкли полагаться преимущественно на padding'и. С ними никогда проблем не было, а margin'ам и флоаты не нужны, чтобы выдавать перлы типа отступа снаружи элемента-родителя.
          • –5
            в IE6 общая длина эллемента с паддингами считается отлично от других браузеров, чем иногда сильно мешает. Хотя в данном случае мне кажется все будет нормально.
            • –1
              _Всегда_ нормально считалось (отнимаешь паддинг от width/height, enjoy!). Возможно у Вас выбран, плохо воспринимаемый ослом, Doctype.
            • НЛО прилетело и опубликовало эту надпись здесь
            • –2
              position:fixed в IE6?
              • –2
                я написал «как position:fixed» =). Недавно сталкивался с такой ситуацией:
                Каталог товаров, весь блок которого был с overflow:auto: фотографии товаров и на них наложены плашки типа «NEW!» с position:realtive. Ну вот, при скролле каталога, фотки двигались, а плашки нет.
                • НЛО прилетело и опубликовало эту надпись здесь
              • +23
                Хорошая статья, но я уже забил на поддержку IE6
                • +8
                  Зря дяденька. Чтобы нам не доносили оптимистичные графики (мол доля IE6 уже ниже плинтуса и все давно на Лисе), в какой офис не заглянешь, в какой кабинет не сунешься — он везде.
                  Не знаю, где берут статистику по браузерам, но это место явно далеко не в России.
                  Примерно 90% моих клиентов сидят по ослом, а те кто не сидят все равно в нем проверяют =)
                  • –6
                    Обычно такие заявления на Хабре делают те, кто кроме собственных штанов больше ничего другого в жизни не поддерживал.
                    • +3
                      Прикажете быть принципиальным, но голодным? Клиенты редко поддаются переубеждению.
                      А вы мне предлагаете либо пролетать с работой, либо переучивать клиентуру на другие браузеры? Вернитесь на Землю.
                      • 0
                        Сорри. Высказывание относилось к мнению Fesor.
                        • 0
                          Тогда, поддерживаю Ваше высказывание =)
                    • –4
                      ЗЫ. Идиотские по кампании по неподдержке ie6 на хабре проводится чуть не раз в месяц. И пользуются неизменной популярностью.
                      • +1
                        Люди, использующие IE, ровным счетом, никогда не заходят на такие сайты как хабр, не бывают на IT-выставках/конференциях и вообще не в курсе ничего связанного с нормальным обитанием в Интернете. Даже, если они узнают о другом браузере, просто побоятся пробовать.
                        • 0
                          Ну я бы исправил «нормальным обитанием» — это они нормальные, а гики — извращенцы. И пробовать не боятся, а просто не хотят: из «шашечки или ехать» они выбирают ехать. Их интересует исключительно контент, и даже если дизайн сайта в их браузере «едет», даже если дизайна как такового нет, они все равно будут заходить на сайт, если там есть нужный им контент. Поэтому в ситуации «кто обедает девушку тот ее и танцует» ИЕ останется королем на рынке браузеров для нормальных людей до тех пор, пока это не надоест Майкрософт.
                          • +5
                            Люди, использующие базовую комплектацию ВАЗ 21099, никогда не заходят на сайты по тюнингу ВАЗов, не бывают на автовыставках и вообще не в курсе ничего связанного с нормальным передвижением на дорогах. Даже, если они узнают о тюнинге своей машины, просто побоятся пробовать.
                        • –4
                          Ну а у меня ситуация куда более веселая, мало у кого остался 6-ой осел, у всех если он и стоит, то 7-ой или 8-ой версии.

                          Но я все же стараюсь делать проекты так, что бы меньше времени потом сидеть за тестированием в каждом отдельновзятом браузере. Как правило у меня больше времени уходит на доводку JS под огнелис неже ли правка верстки под IE6
                          • –4
                            P.s. Дяденькой обидел) Я твой ровестник))
                          • +1
                            Смотрю статистику по сайту компании, окло 60% — ie, из них ie6 — 20%. Мало ie7 и много ie8. Что не может не радовать.
                            • +2
                              Пока не перестанешь поддерживать — не обновят.
                              • 0
                                А может, так:

                                Поддержка IE6 увеличивает стоимость верстки в два раза. Хотите — платите. Всё честно. В два раза больше работы — в два раза больше стоимость. А нужны эти проценты IE6 клиенту или нет — пускай он сам решает, исходя из своей целевой аудитории и платежеспособности.

                                ?
                                • НЛО прилетело и опубликовало эту надпись здесь
                                  • 0
                                    Проиграет, но не быстро :)
                                    Пока будет проигрывать, IE6 окончательно перестанет быть актуален.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                            • +1
                              11. Если у вложенного дива стоит position: relative, ну а у родителя — overflow: hidden, то скорее всего overflow не будет работать, если не добавить родительскому тоже position: relative.
                              • +4
                                Хватит уже перетирать верстку под IE6. Последний месяц все проекты уже без его поддержки
                              • –2
                                А когда IE6 научился «понимать» XHTML 1.0 Strict?
                                • –1
                                  всегда понимал, а что?
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    • –2
                                      не учи учёного ;-)
                                • +4
                                  11 способ — послать подальше IE6 реально помогает.
                                  • 0
                                    Трудно понять тех людей которые отпугивают пользователей от своих сайтов, прекращая поддерживать IE6. Разве так трудно сделать корректное отображение сайта, но параллельно вывести скажем аккуратное предупреждение о том, что не все функции будут работать в IE6 и дать ссылки на браузеры. Так хоть пользователь сможет прочитать и понять суть проблемы, почему он не сможет пользоваться этим сайтом или сможет пользоваться лишь ограниченно, а не увидев кашу вместо сайта, сбежит.
                                    • 0
                                      такое предупреждение для пользователя будет скорее отталкивающим фактором, а вот ошибка в верстке, за интересным содержанием, может в глаза не бросится
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                    • +5
                                      вредные советы…
                                      • 0
                                        >Конечно, можно использовать и другие теги в связке с java script, но лучше всего подходит.

                                        Робот переводил?
                                        • 0
                                          5. Fixing the repeated characters bug
                                          Это не поддалось переводу? =)
                                        • +5
                                          Уже актуально писать про поддержку IE7 и выкрутасы IE8
                                          • +1
                                            Плюсую. В последнем проекте вылизал верстку под оперой, убедился, что в лисе все идентично, пофиксил IE6 до состояния pixel-perfect, а потом случайно открыл в IE7 и охренел. Ибо верстка расползлась почти в ноль(
                                            Сижу переверстываю(
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                          • 0
                                            Меня умиляет как некоторые борются за 100% валидность кода и css по всем самым жестким правилам и при этом пытаются впихнуть в эти стандарты костыли для IE. Мне кажется стандарты и IE это вещи, близкие к тому, чтобы быть противоположными.
                                            • 0
                                              • –3
                                                • +1
                                                  Спасибо за статью. Но мне кажется более элегантным решением использовать graceful degradation (когда в ie & co дизайн проще, отсутствуют полупрозрачности, градиенты и т.д.)
                                                  Т.е. это тот случай, когда на пользователя не забивают, а как бы намекают ему, что можно бы и обновить браузер, чтобы получить занятные эффекты.
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                    • 0
                                                      С png все понятно, но это уже хорошо отработанный глюк и его решение обычно не напрягает. Напрягают внезапные выкидоны IE при использовании семантичных горизонтальных меню на списках и сложной стилизации инпутов с селектами.
                                                    • –1
                                                      10 способов побороть проблемы в IE6
                                                      Способ 0. Не используйте IE6. :)
                                                      • 0
                                                        вы это скажите тому толстому дядьке, которому сайт делаете. он вас куда дальше пошлёт после вашего предложения обновить его браузер.
                                                        • +3
                                                          Мы толстому дядьке подробно объяснили, как необходимость поддержки IE6 влияет на стоимость разработки (очень большое и дорогое B2B приложение). Дядька благоразумно решил, что IE6 ему на *** не сдался. Могу уверенно сказать, что 80% связанных с GUI пропадает, когда из семейства IE вам нужно поддерживать только IE8+ — разработка идет намного проще и быстрее.

                                                          Охотно верю, что не все заказчики столь благоразумны. Скорее даже большинство — не благоразумны. Но согласитесь, с каждым годом бремя поддержки IE6 становится всё дороже и дороже.

                                                          Если для заказчика IE6 важен — предлагайте ему «graceful degradation» по мере возможности.
                                                          • 0
                                                            согласен. время уберёт старые версии браузеров вместе со старыми компьютерами.
                                                            будем надеяться на благоразумность людей.
                                                            • 0
                                                              * %80 проблем
                                                              • 0
                                                                >большое и дорогое B2B приложение
                                                                А если бы это был дорогой и большой сайт с миллионом хостов и отбивкой денег за счет рекламы. Вы бы стали втюхивать клиенту, что 150.000 тыс. посетителей ему не нужны, c отсылкой на B2B?
                                                                • 0
                                                                  Поверьте, заказчику имеет значение, будет ли сайт стоить 1 млн. или 1,5 млн., но с поддержкой лишних 5-10%.
                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                    • 0
                                                                      >Может быть я чего-то недопонимаю
                                                                      Скорее всего в этой конторе просто обувают тупых клиентов, на всем чем могут.

                                                                      > IE6 занимал бы больше 15%
                                                                      На хабре, вы — среди немногих, для кого отладка ie6 — нормальный рабочий процесс. Для большинства остальных это непосильная задача.
                                                                      • 0
                                                                        непосильная задача — не беритесь
                                                                        • –1
                                                                          Юноша, кажется выше вы объявили о том, что на поддерживаете ie6. На радость хабролеммингам.
                                                                          Учитывая какую феерическую х… вы несли баги подсчета width+padding в ie6, становится понятным, почему именно вы прекратили это неблагодарное и непосильное для вас занятие.
                                                                      • 0
                                                                        На «всевозможных сайтах-визитках» нет необходимости разрабатывать сложные кастомные GUI-компонеты (таблицы с горизонтальным и вертикальным скроллингом, пагинацией, фильтрами и сортировкой; различные календари; лукапы; кнопки-меню и прочее). Так что ситуации разные.

                                                                        Одна только возможность полноценно использовать селекторы из CSS2 (не CSS3!) сильно упрощает задачу разработки подобных компонент. IE6 тут — слишком дорого обходится.
                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                            • 0
                                                              6 ослик — уже неактуально. Никто же не пытается перебороть проблемы старых версий хрома, оперы, сафари, файрфокса. Потому что это тоже неактуально.
                                                              • +1
                                                                потому что люди, использующие альтернативные браузеры, стараются их обновлять регулярно, чего не скажешь о «счастливых» обладателях старых версий IE.
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                  • +1
                                                                    Это все борьба с симптомами, а нужно бороться с самой проблемой
                                                                    1. В т.з. не писать про поддержку ie6
                                                                    2. Для пользователей ie6 писать предупреждение про устаревший браузер и предложить выбрать один из новых
                                                                    • +3
                                                                      Smashing Magazine вчера написал шикарную статью «Как поддерживать IE6 и оставаться в теме».
                                                                      Большинство примеров сводятся к тому, что на IE6 нужно забить. Никаких специальных css, фильтров для PNG, дополнительной верстки и прочее…

                                                                      Я верстаю 7 лет.
                                                                      Я согласен со Smashing Magazine.
                                                                      Я надеюсь, что совсем скоро я буду делать проекты без «IF IE6» — просто потому, что нужно двигаться вперед.
                                                                      10 лет за границей даже машины не ездят.

                                                                      Мне жалко тех, кому запрещено обновить браузер — мне просто их жалко, их админ-идиот.
                                                                      Мне жалко тех, кто использует нелегальные версии Windows — мне просто их жалко.
                                                                      Мне жалко тех, кто принял IE6 и пишет приложения под него в рамках корпоративных стандартов — они просто больные, неужели такого большого срока недостаточно, чтобы понять свою неправоту.
                                                                      • 0
                                                                        Все будет хорошо,
                                                                        IE9 уже почти дописали, а с ним дойдут до масс CSS3 и другие прелести,
                                                                        в следующем году Windows 8 выйдет

                                                                        Помните как IE5.5 отвалился?
                                                                        IE6 сдохнет, когда крупные порталы забьют на него — осталось не долго.
                                                                        • 0
                                                                          Поправка, 8-рку еще года 2 ждать
                                                                          • 0
                                                                            IE6 сдохнет только тогда, когда сдохнет WinXP! Не ранее…
                                                                        • –1
                                                                          А перевод то машинный, да? :)
                                                                          • +4
                                                                            Топик отчаянно минусуется завхозом Тамарой Петровной и её сисадмином, который накатил на все компы конторы XP SP1 Corp(стоящий аж 4500 рублей максимум), потому что «эта версия стабильнее(у него руки из жопы просто)» с отключенными обновлениями.

                                                                            Проблемы, господа, в головах.
                                                                            В головах техподдержки.
                                                                            В головах неграмотных юзеров, которые же и заказчики.
                                                                            Помоги миру — пересади кого-нибудь на СОВРЕМЕННОЕ ПО.
                                                                            Я вот два человека за эту неделю пересадил на другой браузер…
                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                              • 0
                                                                                есть варианты ЗА?)
                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                            • +3
                                                                              Мы уже полгода будет как отказались от поддержки IE6
                                                                              • –1
                                                                                Многие здесь говорят, мол, забьем на IE6.
                                                                                Правда, никто не хочет замечать, что мы живем в «обществе», а люди, которые понимают всю обсурдность существования IE6 для всех лишь неформалы.
                                                                                • 0
                                                                                  Следующая статья будет «Борьба с проблемами в IE5 и NN7»? :))

                                                                                  Шутка ;), сам знаю что для некоторых проектов это всё ещё необходимо :/.
                                                                                  • 0
                                                                                    Топик зла?
                                                                                    Хотя что это я спрашиваю… ведь название топика можно легко заменить на «10 способов побороть зло»
                                                                                    • +1
                                                                                      некрофилии очередной пост.

                                                                                      вы ещё дочерние/сестринские css-селекторы не используйте из-за ie6.
                                                                                      кандалы прогресса.
                                                                                      • +1
                                                                                        Забавно, эту же статью, но переведённую другим автором, я ранее нашёл на другом сайте dimox.name/10-fixes-for-ie6/.
                                                                                        • +3
                                                                                          Не лучший перевод не лучшей статьи.

                                                                                          * За косяки перевода автору лучи поноса.
                                                                                          Сколько можно уже постить на хабр вот такой невычитанный машино-писец?

                                                                                          А, ну и конечно — жду ответных минусов.
                                                                                          • 0
                                                                                            11. Перестать его поддерживать.
                                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                                            • 0
                                                                                              Ой какие все принципиальные! Комменты а-ля «11. Перестать его поддерживать» идут через один.
                                                                                              Не знаю, откуда берётся статистика вида «IE6 — 10%», но у всех моих знакомых, работающих в крупных компаниях, установлен именно IE6. И обновить его, ясное дело, нельзя.
                                                                                              Я понимаю, что YouTube не особо нужен на рабочем месте, а вот другие сайты…
                                                                                              Моё мнение: да, IE6 — это ужас и зло, это море сложностей и бездна потраченного времени. Но его нужно поддерживать. Забивая на IE6, вы отказываетесь от всех офисных работников. Сами выбирайте, что важнее для вашего сайта.
                                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                • 0
                                                                                                  Так никто не принципиален. Разработки, которыми я занимаюсь не имеют никаких привязаностей к IE 6, так зачем ебатся для его поддержки? это не универсальное решение, некоторым подойдет, кому-то не подойдет.
                                                                                                  • 0
                                                                                                    Ну я про это и говорю — конечно, нужно оценивать ситуацию, исходя из конкретного проекта. Если не нужна универсальность, так можно и забить на сложные случаи.
                                                                                                • +1
                                                                                                  Может люди обновят свой IE6, когда все верстальщики дружно забьют на написание хаков под него
                                                                                                  • +1
                                                                                                    нет, обновятся когда придет время… Но если посетителей твоего сайта менее 5% с ослом шестым — то можно и забить… Хотя лучше верстать так что бы все было одинакого во всех баузерах.
                                                                                                  • 0
                                                                                                    Мне нравится более решительный метод, как было на Youtube, т.е. вылазит строчка, показывающая надпись вроде «Извините, но ваш браузер — старое УГ, выберите себе новый».

                                                                                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.