欢迎访问
品牌策划
旗下产品
博比管理系统
官方网站！
手机版
网站首页
微信/手机站
电脑板
服务案例
关于我们
域名注册
商标注册
上云服务
微信小程序
知识库
IE6常见Bug10：图片下面有空隙
来源：
博比管理系统
日期：
2015-09-08 15:59:31
属于：
浏览器兼容专题
<!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=utf-8" /> <title>IE6中图片下面有空隙</title> <style> body{ background:#ddd;} .demo{ height:50px;background:green; margin-bottom:5px;} img{ height:50px;} #fix1{/*去掉标签多余空格、回车*/} #fix2{ display: block;} #fix3{ font-size:0;} #fix4{ vertical-align:bottom;} #fix5{ overflow:hidden;} #fix6{float:left;} </style> </head> <body> <h2>bug</h2> <p>图片下面有空隙</p> <div class="demo"> <img src="/Upload/20141120091153oFwu.jpg" /> </div> <p>解决方案1：去掉标签多余空格、回车</p> <div class="demo"><img src="/Upload/20141120091154JTKl.jpg" id="fix1" /></div> <p>解决方案2：img标签添加display:block，将图片转化为块级标签</p> <div class="demo"> <img src="/Upload/20141120091154PgET.jpg" id="fix2" /> </div> <p>解决方案3：设置父容器font-size为0</p> <div class="demo" id="fix3"> <img src="/Upload/20141120091154cFeT.jpg"/> </div> <p>解决方案4：设置图片的垂直对齐方式，定义vertical-align属性值为vertical-align:top | bottom，不能设为middle，会导致顶部有空隙</p> <div class="demo"> <img src="/Upload/20141120091154DIuo.jpg" id="fix4"/> </div> <p>解决方案5：给父对象添加overflow:hidden样式（必要条件是：1、父对象的宽、高固定；2、图片大小随父对象而定；）</p> <div class="demo" id="fix5"> <img src="/Upload/20141120091154DhjZ.jpg" /> </div> <p>解决方案6：设置图片浮动属性</p> <div class="demo"> <img src="/Upload/20141120091154lLYy.jpg" id="fix6" /> </div> </body> </html>
在IE6中显示效果图如下：
上一文章：
IE6常见Bug11：空标签高度始终为19px
下一文章：
IE6常见Bug9：定位元素消失
相关文章
2015-09-08
IE6常见Bug9：定位元素消失
2015-09-08
IE6常见Bug8：绝对定位1像素偏差
2015-09-08
IE6常见Bug7：定位元素溢出不动
2015-09-08
IE6常见Bug6：定位位置错误
2015-09-08
IE6常见Bug5：表单元素偏离
