IE6/7之<div>标签嵌套img元素垂直加4px ， li 中包含浮动元素， IE下有间距

来源：互联网发布：淘宝商家营销中心编辑：程序博客网时间：2024/06/05 17:30

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>img在IE6和IE7中导致父层DIV高度多了4px</title><style type="text/css">* {margin:0px;padding:0px;}#banner{border:1px solid #000000;}</style></head><body><div id="banner" onclick="alert(this.offsetHeight);">    <img src="/images/windows7.jpg" width="168" height="128" /></div></body></html>

以上这段程序在IE6和IE7中div#banner的实际offsetHeight值为128，在IE8、Firefox和Opera中div#banner的实际高度为132

看了这段代码，很奇怪为什么在IE6和IE7中div#banner的实际高度是132而不是我们认为的128呢。其实这主要是img标签造成的。有以下两种方法可消除IE6和IE7的img造成div的offsetHeight高度不真实的情况:

方法1：在img标签后加上<br />

方法2：在子标签内加上css hack， *margin-bottom:-4px;

方法3：给img加样式display:block 将图片转为块级元素

以上两种方法都可以解决问题，不过推荐用第二种方法，因为第一种方法增加了一个无意义的<br />标签。第二种方法写在样式表，不会增加无意义的标签

另外的方法

1，设置图片的垂直对齐方式

即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。

2，设置父对象的文字大小为0px

即，在#sub中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

3，改变父对象的属性

如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置“overflow:hidden;”来解决。

4，设置图片的浮动属性

即在本例中增加一行CSS代码：“#sub img {float:left;}”。如果要实现图文混排，这种方法是很好的选择。

5，取消图片标签和其父对象的最后一个结束标签之间的空格

这种方法适用范围比较窄，只限于父对象中只包含一个图片对象，而且和父对象的结束标签之间不能有任何空隙。如：XHTML中“<div id="sub">...</div>”替换为“<div id="sub"><img src="http://www.w3cui.org/images/linklogo.gif" alt="" /></div>”

转自：http://blog.sina.com.cn/s/blog_8bd0deda0100xhy4.html