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

那些大方舍得为你花钱的人,并不是多么富有,谁的钱都不是大风刮来的,而是他觉得你们的关系比钱重要,因为重要才舍得。透过云端的道路,只亲吻攀登者的足迹。

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

XML/HTML Code复制内容到剪贴板
  1. <ul>
  2. <li><imgsrc="img-bug.png"alt="imgbug"/></li>
  3. <li><imgsrc="img-bug.png"alt="imgbug"/></li>
  4. <li><imgsrc="img-bug.png"alt="imgbug"/></li>
  5. <li><imgsrc="img-bug.png"alt="imgbug"/></li>
  6. <li><imgsrc="img-bug.png"alt="imgbug"/></li>
  7. </ul>

相应的 CSS:

CSS Code复制内容到剪贴板
  1. ul{list-style:none;}
  2. 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如何实现网页图片底部留出空白的方法到此结束。我喜欢出发,只为到达的地方都属于昨天,哪怕那山再清,那水再秀,那风再温柔,太深的留恋便成了一种羁绊,绊住的不仅有双脚,还有未来。小编再次感谢大家对我们的支持!

标签: CSS