10 Способов Преодолеть Проблемы В Ie6



1. Используйте ДОКТИП Лучше всегда писать тип документа в заголовке каждой 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 ">

От себя добавлю, что перед доктайпом не допускаются никакие сторонние символы.

Никаких пробелов и переносов строк — иначе в теле и html появятся странные поля.



2. Установите положение: относительное

С помощью этого хака вы сможете вылечить огромное количество проблем с компоновкой в IE6 (например, невидимые или странно расположенные блоки.



3. Используйте display:inline для плавающих блоков.

Плавающие элементы с полями могут вызвать знаменитую ошибку двойного поля в IE6. Например, мы указываем левое поле 5 пикселей, а результат — 10 пикселей.

display:inline устранит проблему, и CSS останется действительным

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

Многие ошибки рендеринга в IE6 (и IE7) можно исправить, установив свойство hasLayout. Это внутренняя особенность (или костыль?, прим.

перев.

) IE, который определяет, как содержимое должно быть выровнено и позиционировано относительно других элементов.

Также это свойство можно использовать, когда нужно повернуть встроенный элемент (например, ) в элемент блока или применить эффекты прозрачности.

Самый простой способ установить это значение — задать высоту или ширину (также можно использовать масштабирование, но это свойство не является частью стандарта CSS).

Рекомендуется задавать реальные размеры блока, а если это невозможно (высота меняется динамически), то можно сделать так: height: 1px. Кроме того, если в родительском блоке не установлена высота, значение высоты элемента не меняется, и hasLayout уже включен.



5. Исправление повторяющихся символов

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

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



6. Разрешите теги «a» только для кликабельных элементов и элементов :hover.

Поскольку IE является независимым и альтернативно мыслящим браузером, он не распознает никаких других тегов для этих целей.

Конечно, вы можете использовать и другие теги вместе с Java-скриптом, но это работает лучше всего.



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

Можно писать валидный код и применять стили к отдельным стилям для Donkey и других браузеров без сторонних файлов.

IE6 не понимает «минимальную высоту» и неправильно переключает высоту: 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, но код невалидный, способствуют обновлению браузера.

Вдохновлен этот .

Бесплатный перевод.

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

Теги: #IE6 #IE7 #ошибки #верстка #разработка сайтов

Вместе с данным постом часто просматривают:

Автор Статьи


Зарегистрирован: 2019-12-10 15:07:06
Баллов опыта: 0
Всего постов на сайте: 0
Всего комментарий на сайте: 0
Dima Manisha

Dima Manisha

Эксперт Wmlog. Профессиональный веб-мастер, SEO-специалист, дизайнер, маркетолог и интернет-предприниматель.