如何在IE8及以下版本的浏览器中应用边框半径？

Question

如何在IE8及以下版本的浏览器中应用边框半径？

css

19

我想知道如何在IE8及以下版本的浏览器中应用border-radius。

我知道border-radius是HTML5的功能，而IE8不支持它。

我发现通过使用.htc文件可以实现，但使用htc时我遇到了黑色背景的问题。

我无法解决这个问题。

是否有其他方法可以在IE8中应用border-radius？如果有，能否有人解释一下如何操作？

- user2594152

背景有什么问题？ - YD1m

6个回答

7

首先，为了技术的准确性，border-radius 不是 HTML5 的功能，而是 CSS3 的功能。

我发现在旧版 IE 中呈现盒阴影和圆角的最佳脚本是 IE-CSS3。它将 CSS3 语法转换成 VML（一种类似 SVG 的 IE 特定矢量语言）并在屏幕上呈现。

它在 IE7-8 上的表现要比在 IE6 上好得多，但也支持 IE6。当我使用 PIE 时，我没有想太多，发现它（像 HTC 一样）并不是为了实际功能而构建的。

- Glitch Desire

这个答案非常标准。CSS3 Pie需要在某些父级div中添加z-index和position:relative才能正确渲染，这会严重影响整个设计。已点赞。 - Sakthivel

3

PIE 能够使 Internet Explorer 6-9 能够渲染一些最有用的 CSS3 装饰特性。

http://css3pie.com/

................................................................................

- Rohit Azad Malik

1

因为border-radius是CSS3属性，所以它支持IE9+、Firefox 4+、Chrome、Safari 5+和Opera。您可以使用css3pie。

首先在IE 8中检查此演示，并从此处下载它，然后编写您的CSS规则如下：

 #myAwesomeElement {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(path/to/pie_files/PIE.htc);
}

注意：在上述规则中添加了behavior: url(path/to/pie_files/PIE.htc);。在url()中，您需要指定PIE.htc文件的位置。

- CJ Ramki

0

HTML：

<div id="myElement">Rounded Corner Box</div>

CSS：

#myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    behavior: url(PIE.htc);
    border: 1px solid red;

}