在 IE7 / IE8 中创建圆角答案

【问题标题】：Creating rounded corners in IE7 / IE8在 IE7 / IE8 中创建圆角
【发布时间】：2011-10-19 22:45:14
【问题描述】：

我正在创建一个圆角标签，它在 IE9、Mozilla 和 Chrome 中运行良好，但在 IE7/IE8 中却不行。

代码如下：

<div id="navbar">
<div id="holder">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
</div>

#navbar {}
#holder {
border-bottom:1px solid #000;
overflow:hidden;
}

#navbar #holder ul {
margin:0;
padding:0;
list-style:none;
margin-top:15px;
}

#navbar #holder ul li { }
#navbar #holder ul li a {
text-decoration:none;
float:left;
margin-right:5px;
border:1px solid #000;
padding:15px;
text-align:center;
width:90px;
border-bottom:none;
display:block;
behavior:url(border-radius.htc);
border-radius:5px 5px 0 0;
}

#navbar #holder ul li a:hover {
background:#C09;
color:#fff;
}

能否请您告诉我代码，以便它也适用于 IE7/IE8？

【问题讨论】：

我一直有点喜欢 Spiffy Corners：spiffycorners.com
AFAIK IE7 和 IE8 不支持圆角
能否请您发布border-radius.htc 的内容。或者更好的是，不要使用一个。我经常发现，.htc 文件更麻烦，而不是有用。你可以试试这个jquery插件...jquery.malsup.com/corner

标签： css internet-explorer internet-explorer-8 internet-explorer-7 rounded-corners

【解决方案1】：

IE 7/8 不支持border-radius。不过我听说 IE9 可以。

该站点包含一个在 IE7/8 中获取圆角边框的技巧：http://dimox.net/cross-browser-border-radius-rounded-corners/。您需要下载border-radius.htc 并将以下代码放入您的CSS：

.rounded-corners {
  behavior: url(http://yoursite.com/border-radius.htc);
}

【讨论】：

ie-8 和 7 通过 javascript 支持边界半径检查此链接工作边界半径在 ie7-ie8 davidwalsh.name/css-rounded-corners
如果我的不透明度低于 100%，则背景图像会变成方框而不是普通的。这是个问题吗？

【解决方案2】：

使用 jquery corner ，它适用于所有主流浏览器

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

你甚至可以按照你喜欢的方式配置角落！！

【讨论】：

效果很好，除了圆角截止背景需要透明。对我来说，它是一种浅蓝色，不适合我的背景图片

【解决方案3】：

Internet Explorer 支持 CSS border-radius 本机属性直到版本 9。 对于较低版本的 IE，请检查提到的 jQuery 插件 kvijayhari，jQuery Corner。

【讨论】：

【解决方案4】：

边框半径支持 ie-7, ie-8, ie-9 via javascript 查看本教程如何在 ie http://davidwalsh.name/css-rounded-corners 中显示边框半径

【讨论】：

【解决方案5】：

有以下解决方案：

CSSPie（http://css3pie.com/ 但其压缩的 js 文件大小为 40 KB）
还有另一种使用 IE 的 htc 文件的解决方案
```
    behavior: url(http://yoursite.com/border-radius.htc);
         (almost 40 KB of size)
```
可以在这里找到指南http://dimox.net/cross-browser-border-radius-rounded-corners/
我个人推荐的另一个解决方案是：
```
     jquery.corner.js (http://jquery.malsup.com/corner/) 
```
未压缩的 js 文件大小为 10 KB。

【讨论】：

我已经尝试了所有解决方案，唯一一个创建边框半径等于现代浏览器的是 CSSPie，所有其他选项都有问题。 CSSPie 唯一的坏处是它让 IE8 非常慢