Учим Internet Explorer понимать CSS3
22 июля 2010 года, Размещено в категории: HTML / CSS
Наверное для всех не будет секретом, что Internet Explorer не поддерживает CSS3, и это очень хре.ово для веб-мастеров.
Сейчас для того, чтобы работали функции CSS3 в IE 6-8, веб-мастера используют различные фильтры, но это сильно геморройной способ, и получаем много лишнего кода в файле style.css.
Я предлагаю гораздо более простой способ использовать, вместо фильтров, для того, чтобы Internet Explorer поддерживал CSS3 нам нужно просто подключить один файл в style.css, и наш Internet Explorer изучит CSS3, а теперь подробнее.
Чтобы подключить файл, нужно его переместить в корневую папку сайта, и прописать код в нужном месте в файле style.css: behavior: url (PIE.htc.)
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: #666 0px 2px 3px; -moz-box-shadow: #666 0px 2px 3px; box-shadow: #666 0px 2px 3px; background: #EEFF99; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33)); background: -moz-linear-gradient(#EEFF99, #66EE33); -pie-background: linear-gradient(#EEFF99, #66EE33); behavior: url(PIE.htc); |
Если вы все правильно сделаете, тогда ваш Internet Explorer 6-8 станет понимать такие CSS3 функции как:
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient
- background image
Проект PIE (Progressive Internet Explorer) пока находится на стадии разработке, поэтому ожидать большее количество доступных функции CSS3 нужно в скором времени.
фывфыв
12 лет назад
Не работает !!!
12 лет назад
фывфыв:
Что именно не работает и не получается у Вас, опишите.
Возможно мы не правильно подключили файл??
Файл PIE.htc должен быть в той папке, где и ваш style.css
Тимур
12 лет назад
behavior прописывается один раз в файле стилей в конце? Так?
Или каждый раз при использовании новых атрибутов?
12 лет назад
Тимур:
Подключаем к тому «#» или классу в котором используем функции CSS3, то есть несколько раз приходится подключать.
f0rmat1k
12 лет назад
Используйте position:relative и z-index:0 и все заработает
12 лет назад
У меня локально всё отлично работает, а вот при выгрузке на сервер — 0 реакции, проверял пути, регистры и т.д. — ничего не помогло. Не подскажете в чём дело? 🙂
f0rmat1k
12 лет назад
это таки пути, 100%
12 лет назад
такое дело, хотел поставит PIE на вордпресс, как только его подключаю сразу выдает ошибки у не хочет заходить вообще ни на какую страницу, пишет: «Когда на веб-узле возникает сбой, Internet Explorer пытается восстановить узел. После двух попыток действия по восстановлению прекращаются, чтобы предотвратить бесконечный цикл.» Наверное какая-то несовместимотсь с движком, даже не пойму что случилось…
12 лет назад
пишет что ошибка при востановлении веб-узла
Подскажиме может нельзя использовать PIE на разного рода движках???
12 лет назад
Леша:
Я только что пробовал на WP3, все работает, вы где-то не правильно что-то подключили. Файлы с PIE должны быть в одной папке с файлом style.css
12 лет назад
ну все правильно WP у меня Версия 3.0.1, файлы я правильно подключаю, просто когда пути неправильные указываю, то все работает нормально, а как только прописываю как надо сразу же какая-то несовместимость, ну в общем я для ИЕ сделал фильтрами, и кстати довольно таки неплохо смотрится.
12 лет назад
может быть проблема с самой темой WP, тема у меня «my-white-theme», вроде очень простая.
12 лет назад
Леша:
Я пробовал на стандартной теме twentyten.
12 лет назад
behavior: url(/PIE.htc); — слеш лишний. Осел не воспринимает.
Надо behavior: url(PIE.htc); если рядом со стилями лежит.
12 лет назад
Scr1pt1k:
Спасибо, что заметил уже поправил.
hellga
12 лет назад
Может кому пригодится. У меня PIE.htc не заработал, пока я не добавила в .htaccess строку AddType text/x-component .htc
Джобс
12 лет назад
В жопу IE
12 лет назад
Я с тобой полностью согласен Джобс 🙂 но как это донести до простых пользователей, что IE это говно??
12 лет назад
Помогите некачает фаил PIE.htc искала в нете но нигде почемуто некачает если есть у кого скиньте на мыло плиз archi_ukr@mail.ru
12 лет назад
Shepeleva:
В статье есть ссылка на официальный сайт, там и скачайте PIE.
12 лет назад
Все заработало, только в ие не отображалась верхняя часть бокса. Добавила position:relative и все ок 🙂
Андрей
11 лет назад
Всё заработало только после того, как я прописал в style.css абсолютный путь к файлу PIE (http://www и тд). Почему — не знаю.
ipnch
11 лет назад
Спасибо за подготовленный материал. Все работает.
Сергей
11 лет назад
пытаюсь подключить к Joomla, куда я только этот файл не закидывал, прописывал все возможные пути — работать не желает.
11 лет назад
Сергей:
Добавите в .htaccess строку AddType text/x-component .htc должно помочь.
11 лет назад
хм.. возможно я позновато, но проблему подключения в WP3 решил так
behavior: url(wp-content/themes/pochemu/PIE.htc);