> 웹 프론트엔드 > 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
원래의
1028명이 탐색했습니다.

<!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으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿