如何在IE8和IE8浏览器中应用边框半径？

Question

我想知道如何将border-radius应用于IE8和IE8以下的浏览器。

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

我发现通过使用.htc我们可以实现这一点但是通过使用htc我遇到了黑色背景的问题。

我无法克服这个问题。

是否有其他方法将border-radius应用于IE8？如果是这样，任何人都可以解释我怎么做？

Answer 1

选项1

http://jquery.malsup.com/corner/

选项2

http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip

选项3

http://css3pie.com/

选项4

http://www.netzgesta.de/corner/

选项5

See this question

编辑： 选项6

https://code.google.com/p/jquerycurvycorners/

Answer 2

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

我发现最好的脚本渲染框阴影＆amp;旧版IE中的圆角是IE-CSS3。它将CSS3语法转换为VML（一种特定于IE的矢量语言，如SVG）并在屏幕上呈现它们。

它在IE7-8上比在IE6上运行得更好，但也支持IE6。当我使用它时，我对PIE的想法并不多，并且发现（像HTC一样）它并没有真正构建成功能。

Answer 3

PIE使Internet Explorer 6-9能够呈现几个最有用的CSS3装饰功能

http://css3pie.com/

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

Answer 4

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

首先在IE 8中查看此演示并从here下载 像这样编写你的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文件位置

Answer 5

正如上面的答案所述，CSS PIE使IE6-IE8中的border-radius和box-shadow工作：http://css3pie.com/

这就是说我在使用PIE时仍然发现有点不稳定，现在只是接受使用旧浏览器的人不会看到圆角和阴影。

Answer 6

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;

}

PIE.htc文件可以从http://www.css3pie.com

下载