欢迎访问 licqi IT技术
我们一直在努力

IE CSS Bug系列:图片上没有line-height垂直居中

图片上没有line-height垂直居中

影响的IE版本

这个bug影响IE7, IE6

表现

使用line-height方法时图片没有垂直居中

教程编写时间

2009.7.18 11:39:56

描述

这个bug杀死了我好多脑细胞。我常常在做“产品页面”时,把很多的不同尺寸的图放到相同尺寸的盒子里,使它们看上去更美观。即使是我找到了这个bug的解决办法之后,我依然痛恨它,因为我找到的仅有的解决办法需要添加额外的标记元素。不管怎样,我们来看一下示例。

示例(英文原文中查看

HTML Code:

<div><img src="hl_logo.png" alt="" width="95" height="115"></div>

<!-- NOTE: no white-space in the <div> also triggers bug in IE7 -->

CSS Code:

div {
    width: 150px;
    height: 155px;
    line-height: 155px;
    text-align: center;
}
img {
    vertical-align: middle;
}

在IE8以下版本的IE中,瓢虫的图片没有在垂直方向上居中。(嗨,起码还显示了好么!)

解决方案

以下是上述bug的解决方法(以类型排序)

解决方法 (干净的标记方法)

描述

我得说明,既然这个解决方法被标记为“干净的标记方法”,如果你支持的最低IE版本为7,那么仅需在div中添加空格。(也就是说,<span>元素只在IE7以下版本的中需要)

示例(英文原文中查看

HTML Code:

<div>
    <img src="hl_logo.png" alt="" width="95" height="115">
    <span></span>
</div>

<!-- NOTE: <span> is not needed for IE7; whitespace is enough -->

CSS Code:

div {
    width: 150px;
    height: 155px;
    line-height: 155px;
    border: 1px solid #000;
    background: #f00;
    text-align: center;
}
img {
    vertical-align: middle;
}
span {
    display: inline-block;
}

注意我们添加了一个额外的span从而在7以下版本的IE中修复该bug;我们还将display属性设置为inline-block来使我们关键的span拥有“layout”。最后结果:一切都正常了。

原文链接: haslayout   翻译: 伯乐在线 – nighca

译文链接: http://blog.jobbole.com/49703/

赞(0) 打赏
未经允许不得转载:licqi IT技术 » IE CSS Bug系列:图片上没有line-height垂直居中
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏