Question

我正在创建一个圆角标签，在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？

Answer 1

使用jquery角，它将适用于所有主要浏览器

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

您甚至可以按自己喜欢的方式配置角落！

Answer 2

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);
}

Answer 3

有以下解决方案：

CSSPie（http://css3pie.com/但其压缩的js文件大小为40 KB）
还有另一种使用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。

Answer 4

支持边界半径ie-7，即-8，即-9通过javascript检查本教程如何在http://davidwalsh.name/css-rounded-corners显示边界半径

Answer 5

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

在IE7 / IE8中创建圆角

5 个答案: