css圆角不兼容ie6的问题

发布网友发布时间：2022-08-24 02:52

共4个回答

热心网友时间：2024-12-04 21:48

试试吧～
<style>
#menu {
width:450px;
font-size:14px;
margin:100px auto;
padding:0;
overflow:hidden;
}
#menu a {
text-decoration:none;
display:block;
background:#999;
color:#FFF;
margin-top:15px;
}
#menu a:hover {
margin:0 0 0 0;
height:30px;
padding-bottom:8px;
background:#0CC;
color:#FF0;
font-size:18px;
}
#menu p {
text-align:center;
height:20px;
margin:0 1px 0 0;
}
#menu ul {
list-style-type:none;
margin:0px;
padding:0px;
width:450px;
}
#menu ul li {
width:80px;
float:left;
padding:0;
margin:0;
}
#menu ul li div {
height:1px;
}
#menu ul li .row1 {
overflow:hidden;
border-width:0 5px;
border-style:solid;
border-color:#fff;
}
#menu ul li .row2 {
overflow:hidden;
border-width:0 3px;
border-style:solid;
border-color:#fff;
}
#menu ul li .row3 {
overflow:hidden;
border-width:0 2px;
border-style:solid;
border-color:#fff;
}
#menu ul li .row4 {
overflow:hidden;
border-width:0 1px;
border-style:solid;
border-color:#fff;
}
/* 清除浮动 */
.clear {
dipslay:block!important;
float:none!important;
clear:both;
overflow:hidden;
width:auto!important;
height:0;
margin:0 auto!important;
padding:0!important;
font-size:0;
line-height:0;
}
</style>
</head><body>
<div id="menu">
<ul>
<li>
<div class=" clear"></div>
<a href="#">
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<p>HOME</p>
</a>
</li>
</ul>
</div>
</body>

热心网友时间：2024-12-04 21:48

还是IE6这个另类。
1.你可以选择用图片这样的HTML代码也简洁
<ul id="menu">
<li><a href="#">Home</a></li>
</ul>
CSS:
#menu li a{
background:url(img1.jpg);
}
#menu li a:hover{
background:url(img2.jpg);
}
2.如果只是要兼容主流浏览器，用border-radius就可以搞定
HTML代码同上。
CSS
#menu li{
border-top-left-radius:5px;
border-top-right-radius:5px;
}

热心网友时间：2024-12-04 21:48

哎呀，IE6现在大可不必考虑其兼容性了，IE10都出来了嘛！！IE6的地位远不如当初了，现在就使用者来看，用得相对少些，多考虑考虑兼容于火狐的事吧！！

热心网友时间：2024-12-04 21:49

ie本来就不是标准的，据说支持CSS最标准的应属Mozilla Firefox火狐浏览器