1、代码及在浏览器上的显示
ie7：
ie8+:
Firefox:
Chrome:
可以看出ie7上在div容器下添加img，div与img中有间隙，而在ie8+和其他浏览器上均显示正常
网页源代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ie7 bug: img and div</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body>div{
margin:50px auto;
width:800px;
}
div.div0{
float:left;
margin:10px 20px;
width:90px;
border:2px solid #ff0000;
}
div.div1{
float:left;
margin:10px 20px;
width:8px;
border:2px solid #ff0000;
}
div.div2{
float:left;
margin:10px 20px;
width:90px;
border:2px solid #ff0000;
}
div.div3{
float:left;
margin:10px 20px;
width:10px;
border:2px solid #ff0000;
}
div.div4{
float:left;
margin:10px 20px;
width:10px;
border:2px solid #ff0000;
}
img{
float:left;
}
</style>
</head>
<body>
<div>
<div class="div0">
<img src="login_on.gif">
</div>
<div class="div1">
<img src="led.png">
</div>
<div class="div2">
<img src="login_on.gif">
<img src="logout.png">
</div>
<div class="div3">
<img src="led.png">
<img src="reset.png">
</div>
<div class="div4">
<img src="actLink.png">
<img src="reset.png">
</div>
</div>
</body>
</html>
2、解决问题
解决这个bug有多种方法：
1) 在子标签内加入css hack,*margin-bottom:-4px;
此方法不够完美，只适合图片的高度比较大的情况，可以看到下图中，利用此种方法只有第一个和第三个适合，其他的img与div的上部有间隙。
2) 给img加样式display:block; 将图片转为块级元素
如下图，img{display:block;}
3)设置图片的垂直对齐方式
如下图，img{vertical-align:top;}
4) 设置父对象的字体大小为0px
如下图，body>div>div{font-size:0;}
5) 设置图片的浮动属性
如下图，img{float:left;} or img{float:right;}
时间： 2024-08-24 15:48:42