在IE7/IE8中创建圆角

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

有以下解决方案:

1. CSSPie(http://css3pie.com/但其压缩的js文件大小为40 KB)

2. 还有另一种使用htc文件的解决方案

       behavior: url(http://yoursite.com/border-radius.htc);
            (almost 40 KB of size)
   

   该指南可在此处找到http://dimox.net/cross-browser-border-radius-rounded-corners/

3. 我个人推荐的另一个解决方案是:

        jquery.corner.js (http://jquery.malsup.com/corner/) 
   

   它的未压缩js文件大小为10 KB.