CSS. Поддержка прозрачных слоев PNG для IE-6

Авг.12.2009     Web-программирование > XHTML, CSS, SSI     (2)

Современные браузеры, такие как Opera и Firefox, поддерживают прозрачные слои для PNG графики в отличие от IE-6.
О чем идет речь: посмотрите на рисунок ниже в Internet Explorer 6.
Картинка справа использует расширение для CSS, позволяющее пофиксить проблему с програчностью PNG в браузере IE.
Причем, как для непосредственно изображений (<img>), так и для бэкграунда (фона) слоев (<div>)

Как это работает:

Скачайте файлы:

• iepngfix.htc
• blank.gif

и поместите их в хом-директорию вашего сайта.

В таблицу стилей вашего сайта (CSS) добавьте следующую строку:

img, div { behavior: url("iepngfix.htc") }

Теперь все элементы img и div будут "понимать" PNG прозрачность.

Что делать если:

Все сделали как описано, но прозрачность не работает. – Проверьте внимательно пути к файлу iepngfix.htc в стилях и к файлу blank.gif в коде самого iepngfix.htc. Попробуйте добавить строчку:

alert(‘This works’);

в файл iepngfix.htc – вы должны увидеть предупреждение при заходе на страницу. Если его нет – проблема, скорее всего, в путях

Работает локально, но не работает на сервере. – Необходимо убедиться, что сервер отдает корректный MIME type "text/x-component" для .HTC файлов. Можно добавить в ваш .htaccess строчку:

AddType text/x-component .htc

либо, если и это не помогает, воспользоваться PHP. Создайте PHP файл с именем iepngfix.php следующего содержания:

<?php
header(‘Content-type: text/x-component’);
include(‘iepngfix.htc’);
?>

и залейте его в ту же, директорию, где лежит iepngfix.htc. А в стилях вызывайте не .htc файл, а .php файл, например:

img, div { behavior: url("iepngfix.php") }

Таким образом будет отдаваться нужный MIME для HTC файла.

Надеюсь, статья будет вам полезна, и жду отзывов и комментариев…