Как включить CSS3 Border Radius в Internet Explorer 8 и ниже
CSS3 дает нам возможность создавать закругленные углы с помощью свойства border-radius. Но, как вы, возможно, уже знаете, эта новая функция не распознается в Internet Explorer 8 (IE8) и его более ранних версиях. Поэтому, когда вы применяете CSS3 Border Radius к элементу, он все равно отображается в виде прямоугольника с заостренными кончиками.
В Интернете вы можете найти много разных советов, предлагающих игнорировать IE8. Вы хотели бы сделать это. Но если вы работаете над сайтом для государственного учреждения или банка, у вас может не быть выбора. Вам все еще нужно, чтобы веб-сайт выглядел так же хорошо, как и в современных браузерах, который включает в себя возможность применения CSS3 Border Radius.
Если вам действительно нужно, чтобы ваш веб-сайт был готов к IE8, и при этом использовать функцию CSS3, у нас есть только совет для вас.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Рекомендуемое чтение: руководство для начинающих по CSS3
CSS3Pie
CSS3Pie это вид полифилла для CSS3 декоративных элементов. Помимо CSS3 Border Radius, который мы собираемся обсудить в этой статье, CSS3Pie также поддерживает Box Shadow и Gradients, хотя он ограничен типом Linear Gradient.
Скачать CSS3Pie (Вот). Поместите его в каталог вашего проекта — я поместил его в папку css. Как вы можете видеть на скриншоте ниже, я создал одну таблицу стилей и один HTML-файл.
Откройте таблицу стилей в редакторе кода и установите один из элементов в файле HTML с закругленными углами, например, так:
.border-radius {
высота: 100 пикселей;
ширина: 100 пикселей;
цвет фона: # 2ecc71;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
радиус границы: 50 пикселей;
}
Поскольку ширина и высота элемента равны 100px, а border-radius установлен на 50px, элемент станет кругом:
В IE8, как мы ожидаем, все равно будет квадрат (вздох), но не волнуйтесь.
Чтобы включить эффект закругленного угла, вставьте эту строку: поведение: url (css / pie.htc);, вот так.
.border-radius {
высота: 100 пикселей;
ширина: 100 пикселей;
цвет фона: # 2ecc71;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
радиус границы: 50 пикселей;
поведение: url (css / pie.htc);
}
Обратите внимание, что путь к файлу в url () должен быть либо абсолютным, либо относительным к файлу HTML. Вы также можете добавить эту строку в отдельный файл.
У вас может быть таблица стилей, предназначенная для Internet Explorer. Вы можете поставить поведение: url (css / pie.htc); в этом файле, но убедитесь, что он объявлен в том же CSS-селекторе, вот так.
/ * объявлено в ie.css * /
.border-radius {
поведение: url (css / pie.htc);
}
Обновите страницу в IE8. Закругленный угол должен теперь вступить в силу (та-да!). Это должно работать и в IE7.
Поиск проблемы
Internet Explorer может вести себя неожиданно. Если это не работает (возможно, закругленный угол не вступает в силу или выбранный элемент исчез), добавление свойства position и zoom должно решить проблему:
Использование CSS3 Pie в WordPress
Вы закончили перевод своего сайта в HTML-форму. Вы также используете pie.htc на сайте, чтобы включить CSS3 в IE8. На этом этапе вы готовы превратить сайт в действующую тему WordPress. В этом случае, поскольку WordPress является динамическим, когда страницы могут обслуживать URL-адреса различного уровня, мы должны указать абсолютный путь.
Вы можете изменить путь в CSS следующим образом:
.border-radius {
поведение: URL (http: // localhost / {веб-сайт} / wp-content / themes / {the_theme} /css/pie.htc);
положение: относительное;
зум: 1;
}
Или добавьте внутренние стили в header.php следующим образом:
Последняя мысль
Работать с классными вещами, такими как CSS3 Border Radius, в IE8 очень интересно, и CSS3Pie делает это, давая нам еще одну причину ненавидеть IE8.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)