共计 1260 个字符,预计需要花费 4 分钟才能阅读完成。
图片上没有 line-height 垂直居中
影响的 ie 版本
这个 bug 影响 ie7, ie6
表现
使用 line-height 方法时图片没有垂直居中
教程编写时间
2009.7.18 11:39:56
描述
这个 bug 杀死了我好多脑细胞。我常常在做“产品页面”时,把很多的不同尺寸的图放到相同尺寸的盒子里,使它们看上去更美观。即使是我找到了这个 bug 的解决办法之后,我依然痛恨它,因为我找到的仅有的解决办法需要添加额外的标记元素。不管怎样,我们来看一下示例。
示例()
html code:
- 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 的解决方法(以类型排序)
解决方法 (干净的标记方法)
该方法的时间
2009.7.18 11:52:58
可修复的的版本
所有受该 bug 影响的版本
描述
我得说明,既然这个解决方法被标记为“干净的标记方法”,如果你支持的最低 ie 版本为 7,那么仅需在 div 中添加空格。(也就是说, 元素只在 ie7 以下版本的中需要)
示例()
html code:
-
-
注意我们添加了一个额外的 span 从而在 7 以下版本的 ie 中修复该 bug;我们还将 display 属性设置为 inline-block 来使我们关键的 span 拥有“layout”。最后结果:一切都正常了。