首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

【HTML】ie6包孕img 的div多2px的bottom值[div高度自适应]

2013-01-11 
【HTML】ie6包含img 的div多2px的bottom值[div高度自适应]!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//E

【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即可了

热点排行