Актуальные баги IE6

Последнее время стал замечать, что сегодня модным стало не поддерживать 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>

Все это целиком можно так же посмотреть тут