标签：style blog http color io ar sp div on
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>
解决这个bug有多种方法：
此方法不够完美，只适合图片的高度比较大的情况，可以看到下图中，利用此种方法只有第一个和第三个适合，其他的img与div的上部有间隙。
如下图，img{display:block;}
如下图，img{vertical-align:top;}
如下图，body>div>div{font-size:0;}
如下图，img{float:left;} or img{float:right;}
转载网页博客：ie7bug:div容器下的img与div存在间隙
标签：style blog http color io ar sp div on
原文地址：http://www.cnblogs.com/huanghongxia/p/4033674.html
