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

伯乐在线导读:IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。这篇由伯乐在线前端开发小组的 @nighca 翻译。(欢迎更多前端开发朋友来加入“前端开发小组。)

【提示】:IE CSS BUG 系列译文正在进行中,后续或有改动和调整,请不要转载本系列的译文。

—————————————————————————–

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

影响的IE版本

这个bug影响IE7, IE6

表现

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

教程编写时间

2009.7.18 11:39:56

描述

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

 

示例(英文原文中查看

 

HTML Code:

CSS Code:

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

 

解决方案

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

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

该方法的时间

2009.7.18 11:52:58

可修复的的版本

所有受该bug影响的版本

描述

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

示例(英文原文中查看

HTML Code:

CSS Code:

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

收藏 评论

关于作者:nighca

(新浪微博:@nighca) 个人主页 · 我的文章 ·   

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部