我正在创建一个圆角选项卡,在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;
}
解决方法
IE 7/8不支持border-radius.我听到IE9的确.
这个网站包含一个黑客,可以在IE7 / 8中使用边框：http://dimox.net/cross-browser-border-radius-rounded-corners/.你需要下载border-radius.htc并将以下代码放在你的CSS中：@H_403_3@
.rounded-corners {
behavior: url(http://yoursite.com/border-radius.htc);
}
