IE6 下 img 底部多出空白

是芥末日木有出现,Kayo 又可以继续写博客了。

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

<ul>
	<li><img src="img-bug.png" alt="img bug" /></li>
	<li><img src="img-bug.png" alt="img bug" /></li>
	<li><img src="img-bug.png" alt="img bug" /></li>
	<li><img src="img-bug.png" alt="img bug" /></li>
	<li><img src="img-bug.png" alt="img bug" /></li>
</ul>

相应的 CSS:

ul {list-style: none; }
li {display: block; width: 200px; height: 40px; }

在 Chrome 下,会显示如下的正确结果:

但在杯具的 IE6 下,会显示如下的情况:

接下来是如何解决问题了,解决的方案有很多种,这里 Kayo 列举几个比较好的解决方法:

方法一

方法一也是 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; }

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/ie6-img-bottom-blank-bug.html

评论列表

  • 评论者头像
    回复

    这个不能算bug,其他浏览器也是这样,其实这个是因为图片是替换行内元素,是inline-block的,它的margin-box底部和字体的基线持平,如果你给img添加{padding-bottom: 10px;margin-bottom: 10px;}就可以看到效果

1 2

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O