Последнее время стал замечать, что сегодня модным стало не поддерживать IE6 либо просто забывать о его существовании. Он давно устарел, он глючный, его становится все меньше и меньше и т.п. Но все-таки, пока IE6 еще жив, нужно не забывать о простых мелочах могущих сделать отображение сайта в нем вполне корректным. Итак, некоторые баги 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>
Все это целиком можно так же посмотреть тут