Как включить CSS3 Border Radius в Internet Explorer 8 и ниже

CSS3 дает нам возможность создавать закругленные углы с помощью свойства border-radius. Но, как вы, возможно, уже знаете, эта новая функция не распознается в Internet Explorer 8 (IE8) и его более ранних версиях. Поэтому, когда вы применяете CSS3 Border Radius к элементу, он все равно отображается в виде прямоугольника с заостренными кончиками.

В Интернете вы можете найти много разных советов, предлагающих игнорировать IE8. Вы хотели бы сделать это. Но если вы работаете над сайтом для государственного учреждения или банка, у вас может не быть выбора. Вам все еще нужно, чтобы веб-сайт выглядел так же хорошо, как и в современных браузерах, который включает в себя возможность применения CSS3 Border Radius.

Если вам действительно нужно, чтобы ваш веб-сайт был готов к IE8, и при этом использовать функцию CSS3, у нас есть только совет для вас.

Рекомендуемое чтение: руководство для начинающих по 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.