Всем веб-дизайнерам и верстальщикам хорошо известна проблема, возникающая с кроссбраузерностью шаблона сайта в браузере Internet Explorer. Обычно не работают некоторые свойства CSS3: border-radius, box-shadow и linear-gradient.
Напомню значения данных свойств CSS3:
border-radius – радиус скругления углов объекта.
box-shadow – тень от объекта. Можно задать степень размытия и размеры тени по горизонтали и по вертикали.
linear-gradient – заливка фона объекта в виде градиента (плавный переход от одного цвета к другому). Задаются два цвета: Top color и Bottom color.
Для некоторых браузеров, чтобы в них работали свойства CSS3, можно просто прописать в файле стилей style.css несколько строк, например:
1 2 3 | border-radius: 8px; -webkit-border-radius: 8px; // для Webkit -moz-border-radius: 8px; // для Mozilla Firefox |
Чтобы данные свойства CSS3 работали в Internet Explorer, нам понадобится скачать дополнительный файл. Скачать можно на двух сайтах:
1. Css3pie.com
2. Fetchak.com
На сайте Css3pie.com можно протестировать в действии данный модуль онлайн. Выглядит это так:
Можете изменить цвета градиента, радиус скругления углов, размеры тени.
Скачать модуль можно на этой странице.
После чего закидываем в папку с шаблоном сайта и в файле style.css прописываем директорию, где лежит файл PIE.htc.
Пример для box-shadow:
1 2 3 4 | box-shadow: #666 6px 13px 7px; -webkit-box-shadow: #666 6px 13px 7px; -moz-box-shadow: #666 6px 13px 7px; behavior: url(/pie/PIE.htc); // Путь, где лежит модуль |
На Fetchak.com также имеется неплохой модуль IE-CSS3 для поддержки CSS3 в Internet Explorer.
Скачать IE-CSS3 можно по ссылке
Использовать модуль нужно так же как и в первом случае, прописав директорию, где лежит файл ie-css3.htc:
1 2 3 4 | box-shadow: #666 6px 13px 7px; -webkit-box-shadow: #666 6px 13px 7px; -moz-box-shadow: #666 6px 13px 7px; behavior: url(ie-css3.htc); // Путь, где лежит модуль |
Стоит отметить, что тень (box-shadow) в Internet Explorer будет отображаться немного по-другому, чем в Mozilla Firefox, Safari, Chrome, и нельзя установить другой радиус для отдельного угла.
Подключайте данные модули к свойствам border-radius, box-shadow и linear-gradient в style.css и обеспечьте кроссбраузерное отображение сайта в Internet Explorer!
И еще. Варианты использования свойств CSS3 border-radius, box-shadow и linear-gradient Вы можете посмотреть тут