今天小编跟大家讲解下有关CSS针对IE6实现网页图片底部留出空白的方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS针对IE6实现网页图片底部留出空白的方法 的相关资料，希望小伙伴们看了有所帮助。
昨天在优化主题时意外的发现了 IE6 下 img 标签的一个 Bug ，用块级容器包裹 img 标签时，在 IE6 下 img 标签所在容器底部会出现 5px 多余的空白，例如网页中有如下的结构：
XML/HTML Code复制内容到剪贴板 <ul> <li><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <li><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <li><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <li><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <li><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif </ul>相应的 CSS：
CSS Code复制内容到剪贴板 ul{list-style:none;} li{display:block;width:200px;height:40px;}在 Chrome 下，会显示如下的正确结果：PPPPPPPPPPPPPPP1但在杯具的 IE6 下，会显示如下的情况：PPPPPPPPPPPPPPPPP2接下来是如何解决问题了，解决的方案有很多种，这里 Kayo 列举几个比较好的解决方法：
方法一方法一也是最常用的方法了，就是为 img 标签的父元素添加 overflow: hidden 。li {overflow: hidden; }这个方法比较简单，只是父元素必须有指定的 height ，并且需要注意，某些情况下父元素可能需要显示超出自身大小的子元素（如显示绝对定位的超出父元素大小的子元素），这时使用 overflow: hidden 就不那么合适了。
方法二为 img 标签设置 margin-bottom: -5pximg {margin-bottom: -5px; }
方法三为 img 标签设置 vertical-align: bottomimg {vertical-align: bottom; }
来源：爱蒂网
