首頁 > web前端 > html教學 > 【HTML】ie6包含img 的div多2px的bottom值[div高度自适应]_html/css_WEB-ITnose

【HTML】ie6包含img 的div多2px的bottom值[div高度自适应]_html/css_WEB-ITnose

WBOY
發布: 2016-06-21 09:40:28
原創
1031 人瀏覽過

<!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" / alt="【HTML】ie6包含img 的div多2px的bottom值[div高度自适应]_html/css_WEB-ITnose" >					</div>				</div>				<div class="grid_12 orange">					<!--联系方式-->					<div id="contactway">						<img  src="src/serverph.png" / alt="【HTML】ie6包含img 的div多2px的bottom值[div高度自适应]_html/css_WEB-ITnose" >					</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 class="grid_16 blue">				光晕			</div>			<!--Banner-->			<div class="clear"> </div>			<div class="grid_16 pink">				Banner			</div>			<!--简介-->			<div class="clear"> </div>			<div class="grid_16 blue">				关于+简介			</div>			<!--展示-->			<div class="clear"> </div>			<div class="grid_16 yellow">				<dl>					<dt><a href="#">案例展示</a></dt>					<dd>											</dd>				</dl>			</div>			<!--friends-->			<div class="clear"> </div>			<!--title-->			<div class="grid_4 gray">				friends			</div>			<!--name of friends-->			<div class="grid_12 pink">				names of friends			</div>			<!--about-->			<div class="clear"> </div>			<div class="grid_8 red">				页底导航+版权			</div>			<!--contact-->			<div class="grid_8 green">				联系电话			</div>			<div class="clear"> </div>		</div>								<script type="text/javascript" src="js/jquery.js"></script>		<script type="text/javascript" src="js/jquery.960grid-1.0.min.js"></script>		<script type="text/javascript">		/*<![CDATA[*/		// onload		$(function() {			$("body").addGrid(16, {img_path: 'images/'});		});		/*]]>*/		</script>	</body></html>
登入後複製

图示:
导航下面有一细白线,求指点。虽然通过margin_bottom=-3px;可以纠正。但我的问题出在哪里呢?


回复讨论(解决方案)

设置:#nave li{display:inline;}   #nave li a{display:block;}试试看

设置:#nave li{display:inline;}   #nave li a{display:block;}试试看 搞定了,问题不是 a标签,我调试了很久发现只要设置一个img{margin-bttom:-3px}就正常了

ie6版本  的 ul列表框 有个bug,会在 li上下添加额外的空间,所以一般的修正办法都是 设置 li{第四play:inline},而其中的锚元素 ,一半设置成 block即可了

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板