CSS针对IE6实现网页图片底部留出空白的方法 _云知道

昨天在优化主题时意外的发现了 IE6 下 img 标签的一个 Bug ，用块级容器包裹 img 标签时，在 IE6 下 img 标签所在容器底部会出现 5px 多余的空白，例如网页中有如下的结构：

XML/HTML Code复制内容到剪贴板ulliimgsrc=https://www.rkxy.com.cn/dnjc/img-bug.pngalt=imgbug//liliimgsrc=img-bug.pngalt=imgbug//liliimgsrc=img-bug.pngalt=imgbug//liliimgsrc=img-bug.pngalt=imgbug//liliimgsrc=img-bug.pngalt=imgbug//li/ul【CSS针对IE6实现网页图片底部留出空白的方法】相应的 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: -5px
img {margin-bottom: -5px; }
方法三
为 img 标签设置 vertical-align: bottom
img {vertical-align: bottom; }

CSS针对IE6实现网页图片底部留出空白的方法

推荐阅读

银川异地办理身份证收费标准

实习计划要写什么实习计划怎么写

夏播玉米种哪个品种好夏播玉米种哪个品种是马牙子立场

垃圾分类建议

车牌如何保留

辽宁旅游景点

微信怎么向别人收款

孔雀可以吃吗?

CECT v98＋手机简评

明日之后实名认证怎么解除原来是这样解除的

京东sku名称怎么设置？

依兰高铁站进站需要什么证件，伊犁火车站现在上车需要核酸检测吗

什么卡打电话最便宜？

为啥坚果没有推送升级了

麻雀吃啥

图书着火一般用什么灭火器