如何在 IE8 及以下 IE8 浏览器中应用边框半径？答案

【问题标题】：How to apply border radius in IE8 and below IE8 browsers?如何在 IE8 及以下 IE8 浏览器中应用边框半径？
【发布时间】：2014-01-31 18:49:00
【问题描述】：

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

我知道border-radius是HTML5的特性，IE8不支持。

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

我无法克服这个问题。

还有其他方法可以将边框半径应用于 IE8 吗？如果是这样，谁能解释我怎么做？

【问题讨论】：

背景有什么问题？

标签： css

【解决方案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/

【讨论】：

我可以通过使用 jquery.corner.js 来做到这一点，但在 IE8 中边缘不够平滑，并且通过使用 css3pie.com，IE8 中的背景会变黑

【解决方案2】：

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

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

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

【讨论】：

这个答案很标准。 CSS3 Pie 需要在某些父 div 上添加 z-index 和 position:relative 才能正确渲染，这严重影响了整个设计。 UPvoteD。

【解决方案3】：

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

http://css3pie.com/

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

【讨论】：

【解决方案4】：

border-radius 属性在 IE9+、Firefox 4+、Chrome、Safari 5+ 和 Opera 中受支持，因为它是 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 文件位置

【讨论】：

【解决方案5】：

正如上面的答案所说，CSS PIE 使边框半径和框阴影之类的东西在 IE6-IE8 中起作用：http://css3pie.com/

也就是说，我仍然发现使用 PIE 时有些问题，现在我只能接受使用旧浏览器的人不会看到圆角和阴影。

【讨论】：

【解决方案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下载

【讨论】：