您的位置：首页 > 其它

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

2013-03-11 12:50 661 查看 
<!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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航