首页 > 代码库 > 转载网页博客：ie7bug:div容器下的img与div存在间隙
转载网页博客：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;}
转载网页博客：ie7bug:div容器下的img与div存在间隙
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。