转载网页博客:ie7bug:div容器下的img与div存在间隙
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;}