css圆角不兼容ie6的问题
<style>#menu{width:450px;font-size:14px;margin:100pxauto;padding:0;overflow:hidden;}#...
<style>
#menu{
width:450px;
font-size:14px;
margin:100px auto;
padding:0;
overflow:hidden;
}
#menu a{
text-decoration:none;
display:block;
height:30px;
line-height:30px;
color:#FFF;
}
#menu a:hover div{
background:#0CC;
}
#menu a:hover p{
padding-bottom:8px;
background:#0CC;
color:#FF0;
font-size:18px;
}
#menu p {
border:solid 1px #999;
border-top-width:0;
text-align:center;
height:20px;
line-height:20px;
margin:0 1px 0 0;
background:#999;
color:#FFF;
}
#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;
border-left:solid #999 1px;
border-right:solid #999 1px;
background:#999;
}
#menu ul li .row1{
margin:0 5px;
background:#999;
}
#menu ul li .row2{
margin:0 3px;
border-left: solid #999 2px;
border-right: solid #999 2px;
}
#menu ul li .row3{
margin:0 2px;
}
#menu ul li .row4{
margin:0 1px;
height:2px;
}
#menu #pad{
height:8px;
border:0px;
background:transparent;
}
#menu a:hover #pad{
height:0px;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#">
<div id="pad"></div>
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<p>HOME</p>
</a>
</li>
</ul>
有图有真相，这是ie6的 展开
#menu{
width:450px;
font-size:14px;
margin:100px auto;
padding:0;
overflow:hidden;
}
#menu a{
text-decoration:none;
display:block;
height:30px;
line-height:30px;
color:#FFF;
}
#menu a:hover div{
background:#0CC;
}
#menu a:hover p{
padding-bottom:8px;
background:#0CC;
color:#FF0;
font-size:18px;
}
#menu p {
border:solid 1px #999;
border-top-width:0;
text-align:center;
height:20px;
line-height:20px;
margin:0 1px 0 0;
background:#999;
color:#FFF;
}
#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;
border-left:solid #999 1px;
border-right:solid #999 1px;
background:#999;
}
#menu ul li .row1{
margin:0 5px;
background:#999;
}
#menu ul li .row2{
margin:0 3px;
border-left: solid #999 2px;
border-right: solid #999 2px;
}
#menu ul li .row3{
margin:0 2px;
}
#menu ul li .row4{
margin:0 1px;
height:2px;
}
#menu #pad{
height:8px;
border:0px;
background:transparent;
}
#menu a:hover #pad{
height:0px;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="#">
<div id="pad"></div>
<div class="row1"></div>
<div class="row2"></div>
<div class="row3"></div>
<div class="row4"></div>
<p>HOME</p>
</a>
</li>
</ul>
有图有真相，这是ie6的 展开
4个回答
展开全部
试试吧～
<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>
<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>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
还是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;
}
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;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
哎呀，IE6现在大可不必考虑其兼容性了，IE10都出来了嘛！！IE6的地位远不如当初了，现在就使用者来看，用得相对少些，多考虑考虑兼容于火狐的事吧！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
ie本来就不是标准的，据说支持CSS最标准的应属Mozilla Firefox火狐浏览器
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
