0
Итак, некоторые баги IE6 и как их побороть:
1. IE6 и фоновый цвет у блоков
Описание бага: при отрисовке блоков с несколькими фоновыми изображениями в ie6 используются вложенные div-ы.
Последнему div-у добавляется padding:20px, все логично, но в IE6 фоновый цвет выползает за край блока
.normalBlock {background:#CCC url(img/q.gif) no-repeat 0 0; color:#000; margin:0 0 15px;}
.normalBlock div {background:url(img/q.gif) no-repeat 100% 0;}
.normalBlock div div {background:url(img/q.gif) no-repeat 0 100%;}
.normalBlock div div div {background:url(img/q.gif) no-repeat 100% 100%; padding:20px;}
<div class="normalBlock">
<div>
<div>
<div>
Здесь у нас текст
</div>
</div>
</div>
</div>
Исправление бага: убираем нижний отступ из CSS: padding:20px 20px 0, добавляем еще один вложенный div с height:20px
.ieFixedBlock {background:#CCC url(img/q.gif) no-repeat 0 0; color:#000; margin:0 0 15px;}
.ieFixedBlock div {background:url(img/q.gif) no-repeat 100% 0;}
.ieFixedBlock div div {background:url(img/q.gif) no-repeat 0 100%;}
.ieFixedBlock div div div {background:url(img/q.gif) no-repeat 100% 100%; padding:20px 20px 0;}
.ieFixedBlock div div div div {background:none; padding:0; height:20px;}
<div class="ieFixedBlock">
<div>
<div>
<div>
Здесь у нас текст
<div></div>
</div>
</div>
</div>
</div>
Еще один вариант исправления бага: добваить width:100% для .normalBlock
2. IE6 и высота блоков
Описание бага: при отрисовке блоков с фиксированной высотой в ie6 наблюдается распирание блока по высоте.
.normalLine {background:#666; height:5px;}
<div class="normalLine"></div>
Исправление бага: добавляем overflow:hidden проблемному блоку
.ieFixedLine {background:#666; height:5px; overflow:hidden;}
<div class="ieFixedLine"></div>
3. IE6 и картинки
Описание бага: картинки распирают блоки
.normalPics {background:#000; width:125px; height:100px;}
<div class="normalPics">
<img src="img/test-pic.jpg" alt="" />
</div>
Исправление бага: добавляем overflow:hidden проблемному блоку, либо добавляем display:block вложенной картинке, так же можно добавить vertical-align:top вложенной картинке
.ieFixedPics {background:#000; width:125px; height:100px;}
.ieFixedPics img {display:block;}
<div class="ieFixedPics">
<img src="img/test-pic.jpg" alt="" />
</div>
4. IE6 и плавающие блоки
Описание бага: непонятный отступ, появляющийся после плавающих блоков
.normalMenu {padding-left:6px;}
.normalMenu a {display:block; float:left; margin:0 2px 0 0; text-decoration:none; padding:2px 0 0; font-size:11px; font-weight:bold; line-height:13px; font-family:Tahoma, Geneva, sans-serif;}
.normalMenu a span {display:block; padding:3px 5px 3px; background:#FFF; border:1px solid #CCC; border-bottom:0;}
.normalMenu a:hover {padding:0;}
.normalMenu a:hover span {padding:3px 5px 5px;}
.normalContent {border:1px solid #CCC; background:#FFF; padding:10px; clear:both;}
<div class="normalMenu">
<a href="#"><span>Пункт 1</span></a>
<a href="#"><span>Пункт 2</span></a>
<a href="#"><span>Пункт 3</span></a>
</div>
<div class="normalContent">
Здесь текст
</div>
Описание бага: непонятный отступ, появляющийся после плавающих блоков
.ieFixedMenu {height:22px;}
<div class="normalMenu ieFixedMenu">
<a href="#"><span>Пункт 1</span></a>
<a href="#"><span>Пункт 2</span></a>
<a href="#"><span>Пункт 3</span></a>
</div>
<div class="normalContent">
Здесь текст
</div>
1. Используйте DOCTYPE
Лучше всегда прописывать доктайп в заголовке каждой html-страницы, причем, строгий режим рекомендуется:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR...l4/strict.dtd">
для XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR...l1-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, но код не валиден, пропагандируйте обновление браузера.
