Недавно столкнулся с небольшой проблемой. Во время верстки сайта www.etutorials.org.ua нужно было разместить два элемента так, чтобы они частично перекрывались. В обоих элементах в качестве фона используются картинки, поэтому разместить их нужно точно, иначе линии не совпадут.

Речь идет о блоке со ссылкой для скачивания файла. Этот блок имеет закругленные края, которые создаются с помощью картинок. Второй блок содержит размер файла, и в качестве фона использует изображение со стрелкой.

Задача в общем-то простая и должна легко решаться с помощью CSS. Но разработчики IE6 так не считали.

Посмотрите на разметку этих блоков. Элементы просто размещены один за другим.

В элементах buttonBottom и arrow в качестве фона используются рисунки, которые и должны перекрываться.

Решается задача очень просто. Для блока arrow задается отрицательная верхняя граница и он «наползает» на buttonBottom.

Проблема возникла при тестировании страницы в шестой версии Internet Explorer’а. Это «чудо программерской мысли» рассчитывает отступы совершенно не так, как Firefox, Opera и даже IE7.

Если говорить конкретно, то для того, чтобы рисунки совпали, отступ в IE6 должен быть равен “-48px”.

Решить проблему удалось с помощью специального селектора:

Этот код будет «виден» только IE6 и, может быть, более низким версиям (седьмая версия его игнорирует).

Кстати, я нашел множество примеров, в которых используется этот прием. Обычно его называют «Holly Hack» или «StarHtmlHack».

Удачных вам проектов!