CSS 如何在 IE8 及以下 IE8 浏览器中应用边框半径？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17830372/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply border radius in IE8 and below IE8 browsers?
提问by user2594152
I would like to know how to apply border-radius to IE8 and below IE8 browsers.
我想知道如何将border-radius应用于IE8及以下IE8浏览器。
I know that border-radius is a HTML5 feature and IE8 doesn't support it.
我知道 border-radius 是 HTML5 功能，而 IE8 不支持它。
I found that by using .htc we can achieve this but by using htc I am encountering the problem of black background.
我发现通过使用 .htc 我们可以实现这一点，但是通过使用 htc 我遇到了黑色背景的问题。
I am unable to overcome this problem.
我无法克服这个问题。
Is there any other way of applying border-radius to IE8? If so can anyone explain me how?
有没有其他方法可以将边框半径应用于 IE8？如果是这样，谁能解释我怎么做？
回答by daniel__
Option 1
选项1
http://jquery.malsup.com/corner/
http://jquery.malsup.com/corner/
Option 2
选项 2
http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip
http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip
Option 3
选项 3
Option 4
选项 4
http://www.netzgesta.de/corner/
http://www.netzgesta.de/corner/
Option 5
选项 5
EDIT: Option 6
编辑： 选项 6
回答by Glitch Desire
Firstly for technical accuracy, border-radiusis not a HTML5 feature, it's a CSS3 feature.
首先是技术准确性，border-radius它不是 HTML5 功能，而是 CSS3 功能。
The best script I've found to render box shadows & rounded corners in older IE versions is IE-CSS3. It translates CSS3 syntax into VML (an IE-specific Vector language like SVG) and renders them on screen.
我发现在较旧的 IE 版本中渲染框阴影和圆角的最佳脚本是IE-CSS3。它将 CSS3 语法转换为 VML（一种 IE 特定的矢量语言，如 SVG）并在屏幕上呈现它们。
It works a lot better on IE7-8 than on IE6, but does support IE6 as well. I didn't think much to PIE when I used it and found that (like HTC) it wasn't really built to be functional.
它在 IE7-8 上的效果比在 IE6 上好得多，但也支持 IE6。当我使用 PIE 并发现它（如 HTC）并没有真正发挥功能时，我并没有想太多。
回答by Rohit Azad
PIEmakes Internet Explorer 6-9capable of rendering several of the most useful CSS3decoration features
PIE使得Internet Explorer 6-9能够渲染几个最有用的CSS3装饰功能
................................................................................
………………………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………………………………………
回答by CJ Ramki
The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera, because it is CSS3 property. so, you could use css3pie
IE9+、Firefox 4+、Chrome、Safari 5+ 和 Opera 支持 border-radius 属性，因为它是 CSS3 属性。所以，你可以使用css3pie
first check this demo in IE 8 and download it from herewrite your css rule like this
首先在 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);
}
note: added behavior: url(path/to/pie_files/PIE.htc);in the above rule. within url() you need to specify your PIE.htc file location
注意：behavior: url(path/to/pie_files/PIE.htc);在上述规则中添加。在 url() 中，您需要指定 PIE.htc 文件位置
回答by MrCarrot
As the answer said above, CSS PIE makes things like border-radius and box-shadow work in IE6-IE8: http://css3pie.com/
正如上面的答案所说，CSS PIE 使诸如 border-radius 和 box-shadow 之类的东西在 IE6-IE8 中工作：http: //css3pie.com/
That said I have still found things to be somewhat flaky when using PIE and now just accept that people using older browsers aren't going to see rounded corners and dropshadows.
也就是说，我仍然发现在使用 PIE 时事情有些不稳定，现在只能接受使用旧浏览器的人不会看到圆角和阴影。
回答by web2008
HTML:
HTML：
<div id="myElement">Rounded Corner Box</div>
CSS:
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 file can be downloaded from http://www.css3pie.com
PIE.htc 文件可以从http://www.css3pie.com下载
