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, но код не валиден, пропагандируйте обновление браузера.
Навеяно этим. Перевод вольный.
