sexlnsex!bord_如何在Internet Explorer 8及更低版本中启用CSS3 Border Radius

CSS3使我们能够使用border-radius属性创建圆角。 但是，您可能已经知道，Internet Explorer 8（IE8）及其早期版本无法识别此新功能。 因此，当您将CSS3 Border Radius应用于元素时，它仍然显示为带有尖头提示的框。

您可能会在Internet上找到很多不同的建议，建议您忽略IE8。 您希望可以这样做。 但是，如果您正在为政府机构或银行的网站工作，则可能别无选择。 您仍然必须使网站看起来像在现代浏览器中一样漂亮，其中包括应用CSS3 Border Radius的功能。

如果确实需要使您的网站支持IE8，并且能够使用CSS3功能，那么我们仅为您提供提示。

CSS3Pie

CSS3Pie是一种用于CSS3装饰特征的polyfill 。 除了我们将在本文中讨论CSS3 Border Radius外，CSS3Pie还支持Box Shadow和Gradients，尽管它仅限于Linear Gradient类型。

在此处下载CSS3Pie。 将其放在您的项目目录中–我将其放在css文件夹中。 从下面的屏幕截图中还可以看到，我创建了一个样式表以及一个HTML文件。

在代码编辑器中打开样式表，并在HTML文件中设置带有圆角的元素之一，如下所示：

.border-radius {
	height: 100px;
	width: 100px;
	background-color: #2ecc71;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

由于元素的宽度和高度均为100px，并且border-radius设置为50px，因此元素将变为圆形：

正如我们期望的那样，在IE8中，它仍然是一个正方形（叹气），但请不要担心。

要启用圆角效果，请插入以下行： behavior: url(css/pie.htc); ，就像这样。

.border-radius {
	height: 100px;
	width: 100px;
	background-color: #2ecc71;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	behavior: url(css/pie.htc);
}

请注意， url()中的文件路径必须是绝对路径或相对于HTML文件的路径。 您也可以在单独的文件中添加此行。

您可能具有为Internet Explorer指定的样式表。 您可以输入以下behavior: url(css/pie.htc); 在该文件中，但要确保在同一CSS选择器中声明了它，就像这样。

/* declared in ie.css */
.border-radius {
	behavior: url(css/pie.htc);
}

在IE8中刷新页面。 圆角现在应该生效（ta-da！）。 它也应该在IE7中工作。

故障排除

Internet Explorer可能表现异常。 如果这不起作用（圆角可能无效或所选元素已消失），则添加position和zoom属性应该可以解决此问题：

<style>
.border-radius {
	behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc);
	position: relative;
    zoom: 1;
}
</style>

在WordPress中使用CSS3 Pie

您已完成将网站以HTML格式放置。 您还可以在网站中使用pie.htc在IE8中启用CSS3。 在此阶段，您已准备好将网站转换为可正常运行的WordPress主题。 在这种情况下，由于WordPress是动态的，因此页面可以在不同级别的URL中提供服务，因此我们必须指定绝对路径。

您可以像这样更改CSS中的路径：

.border-radius {
	behavior: url(http://localhost/{website}/wp-content/themes/{the_theme}/css/pie.htc);
	position: relative;
	zoom: 1;
}

或通过以下方式在header.php中添加内部样式：

<style>
.border-radius {
	behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc);
	position: relative;
	zoom: 1;
}
</style>

最终思想

在IE8中使用CSS3 Border Radius这样的很棒的东西很有趣，而CSS3Pie做到了这一点，同时给了我们减少讨厌IE8的理由。

翻译自: https://www.hongkiat.com/blog/css3-border-radius-in-internet-explorer/