【HTML】ie6包含img 的div多2px的bottom值[div高度自适应]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>new_file</title>
<meta name="author" content="Administrator" />
<!-- Date: 2012-12-26 -->
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
</head>
<body>
<style>
/*
* COMMon
* **********
*/
a{text-decoration: none;}
a:hover{color: gold;}
/*
* COLOR
* *******
*/
div{text-align: center}
.red{background-color:red}
.green{background-color:green}
.yellow{background-color:yellow}
.silver{background-color:silver}
.gray{background-color:gray}
.pink{background-color:pink}
.orange{background-color: orange}
.blue{background-color:blue}
/*
* 元素
* *****
*/
/*
* header
* **********
*/
#logo{height: 100px;}
#contactway{height:67px;float: right }
#nave{height:33px;width:700px; float: left;background-image: url(src/nv.png);background-repeat: no-repeat;overflow: hidden;}
#nave ul{list-style: none;float: left;height: 32px;}
#nave ul li{float: left;width: 100px;text-align: center;margin-left: 0px;height: 32px;}
#nave ul li a{line-height: 32px;font-weight:bold;display:inline-block; color: white;width: 100%;height: 100%;}
#nave ul li a:hover{background-image: url(src/nvbk.png);background-repeat: no-repeat;}
/*
* center
* **********
*/
#cases{width: 100%;float: left;}
</style>
<!--Containner16-->
<div class="container_16">
<!--header-->
<div class="grid_4" style="margin-bottom: -3px;">
<div id="logo" class="yellow">
<img src="src/logo.png" />
</div>
</div>
<div class="grid_12 orange">
<!--联系方式-->
<div id="contactway">
<img src="src/serverph.png" />
</div>
<div class="clear"> </div>
<!--nave-->
<div id="nave">
<ul>
<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>
<li><a href="#">联系我们</a></li>
<li><a href="#">VIP服务</a></li>
</ul>
</div>
<div class="clear"> </div>
</div>
<!--光晕-->
<div class="clear"> </div>
<div alt="【HTML】ie6包孕img 的div多2px的bottom值[div高度自适应]" />
导航下面有一细白线,求指点。虽然通过margin_bottom=-3px;可以纠正。但我的问题出在哪里呢?
[解决办法]
ie6版本 的 ul列表框 有个bug,会在 li上下添加额外的空间,所以一般的修正办法都是 设置 li{第四play:inline},而其中的锚元素 ,一半设置成 block即可了