清除浮动的方法有许多比较常用的是
.clear{zoom: 1;}
.clear:after{content: "";display: block;clear: both;}
after伪类元素末尾添加内容Ie6,7不兼容可以用zoom来解决（zoom缩放会触发ie下的haslayout使元素根据自身内容计算宽高但火狐不支持但可以通过after伪类解决）
两者结合解决的浏览器不兼容的问题；
ie6下li标签的部分兼容性问题：
可以通过给li标签加
vertical-align: top;解决在ie67下的4px间隙问题及左右两列布局Ie67下的折行问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul{margin: 0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none;}
.nav{width: 496px;height: 177px;background: #f0f0f0;margin: 30px auto; position: relative;}
.clear{zoom: 1;}
.clear:after{content: "";display: block;clear: both;}
.nav ul{display: inline; position: absolute;left: 40px;top:60px;}
.nav li{float: left;vertical-align: top;}
.nav li a{
display: block;
height: 40px;
border: 1px solid #f06000;
padding: 0px 15px;
margin:0 0 0 -1px;
font-size: 14px;
line-height:40px;
position:relative;
z-index: 0;
float: left;
}
.nav li a:hover{
border: 1px solid #000000;
z-index: 1;
}
</style>
</head>
<body>
<div class="nav clear">
<ul class="clear">
<li><a href="#">首页</a></li>
<li><a href="#">欢迎你</a></li>
<li><a href="#">欢迎大家！</a></li>
<li><a href="#">欢迎大家！！</a></li>
<li><a href="#">导航栏</a></li>
</ul>
</div>
</body>
</html>
时间： 2024-11-10 00:26:50