CSS3 PIE – делаем Internet Explorer современным

CSS3 PIE позволяет IE корректно отрабатывать некоторые возможности CSS3:

border-radius
box-shadow
border-image
множественные фоновые изображения
линейные градиенты в качестве фона

Использование CSS3 PIE

Для начала качаем последнюю версию библиотеки. Затем нужно внедрить PIE.htc в свой проект. Для этого элементам, которые будут использовать вышеуказанные свойства, прописываем behavior: url(path-to/PIE.htc). К примеру, для закругления это будет выглядеть так:



Обнаруженные проблемы CSS3 PIE и их решения:

Возможны проблемы при применении PIE к элементам с position:static. Разработчики будут решать её;
При использовании относительного пути к pie.htc, необходимо указывать относительно html файла, а не таблицы стилей;
В данной версии корректно работают только сокращенные варианты написания атрибутов. То есть border-radius cработает, а border-top-right-radius – нет. Важно это или нет – каждый решает сам;
PIE меняет свойство hasLayout в IE;
Пока что библиотека работает не со всеми элементами. При наличии проблем, необходимо обернуть элемнт в div и применить PIE к этой div-обертке;
Для работы PIE.htc требуется корректный content-type заголовок. Файл .htc должен передаваться с заголовком text/x-component. Как правило, для решения проблемы хватает правок настройек сервера. Если же финт не прокатывает, то в файле .htaccess необходимо добавить (или снять коммент) строку AddType text/x-component .htc. Если же и такой возможности нет, то нужно воспользоваться файлом PIE.php, который есть в дистрибутиве. Его необходимо запускать из того же каталога, где размещен PIE.htc. А в таблицу стилей подключать уже .php файл. Примерно так:



Все возможности, поддерживаемые PIE относятся к графике. Для их эмуляции PIE использует VML. Создается VML-объект, в котором рисуется необходимый графический эффект. Затем полученный объект подставляется на место целевого элемента абсолютным позиционированием.