DD_belatedPNG – фикс PNG24 в IE6

24 08/09
52

DD_belatedPNG – еще один способ решения проблем с полупрозрачными PNG в IE6.

В DD_belatedPNG позволяет использовать background-position, background-repeat и :hover. Ссылки и элементы форм в блоке с полупрозрачным фоном остаются кликабельны.

Использовать скрипт очень просто:

  • Скачайте js файл.
  • Подключите его к странице.
  • Укажите какие элементы необходимо исправить. 
1
2
3
4
5
6

<!--[if IE 6]>
  <script src="DD_belatedPNG.js" type="text/javascript"></script>
  <script type="text/javascript">
    DD_belatedPNG.fix('.png-elem');
  </script>
<![endif]-->
Теги: •

Position fixed в IE6

03 08/09
14

Как известно IE6 не поддерживает position:fixed. Для эмуляции данного эффекта можно использовать position:absolute и CSS expression.

1
2
3
4

#fixed{ /* Стили для IE6 */
  position:absolute;
  top:expression(eval(document.documentElement.scrollTop))
}

Чтобы не было подергиваний фиксированного блока, нужно добавить элементу html или body фоновое изображение. В качестве значения background можно использовать about:blank.

1
2
3

html{
  background:url(about:blank)
}
Теги:

Баг с курсивным текстом в IE6

10 07/09
5

Проблема заключается в том, что при использовании курсивного начертания, IE6 увеличивает ширину блока с текстом, что может «поломать» структуру вёрстки.

Проблема известна достаточно давно, но возможно не все о ней знают. Баг подробно описан в этой статье.

Проблема проявляет себя достаточно хаотично. Слудующие условия в той или иной степени влияют на её появление:

  • на возникновение проблемы влияют: длина строки текста, содержание и шрифт (семейство, размер и т.д.);
  • несколько слов написанных курсивом (возможно, в середине текста);
  • наличие слова, написанного курсивом в начале или конце строки;
  • проблема проявляет себя тем чаще, чем больше курсивного текста;
  • проблема возникает ещё чаще, если курсивный текст выровнен по ширине (text-align:justify);
  • проблема проявляеться независимо от того каким образом получен курсивный текст (используеться ли элемент em или span с text-style:italic);

Решается, путём добавления блоку с текстом, hasLayout и overflow:visible:

1
2
3
4

.element{
  height:1%;
  overflow:visible
}
Теги: •