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, но код невалидный, способствуют обновлению браузера.
Вдохновлен этот .
Бесплатный перевод.
Теги: #IE6 #IE7 #ошибки #верстка #разработка сайтов
-
Как Быстро Увеличить Посещаемость Сайта
19 Oct, 24 -
Обзор Dell Vostro Серии V3300-Cto
19 Oct, 24 -
Обесценивание Персональных Данных
19 Oct, 24 -
Диалоги О Больших Данных
19 Oct, 24 -
Обзор Планшета Asus Eee
19 Oct, 24