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

开发 前端
即使是我找到了这个bug的解决办法之后,我依然痛恨它,因为我找到的仅有的解决办法需要添加额外的标记元素。不管怎样,我们来看一下示例。

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

影响的IE版本

这个bug影响IE7, IE6

表现

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

教程编写时间

2009.7.18 11:39:56

描述

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

示例(英文原文中查看

 HTML Code:

  1. <div><img src="hl_logo.png" alt="" width="95" height="115"></div> 
  2.   
  3. <!-- NOTE: no white-space in the <div> also triggers bug in IE7 --> 

CSS Code:

  1. div { 
  2.     width150px
  3.     height155px
  4.     line-height155px
  5.     text-aligncenter
  6. img { 
  7.     vertical-alignmiddle

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

解决方案

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

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

该方法的时间

2009.7.18 11:52:58

可修复的的版本

所有受该bug影响的版本

描述

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

示例(英文原文中查看

HTML Code:

  1. <div> 
  2.     <img src="hl_logo.png" alt="" width="95" height="115"> 
  3.     <span></span> 
  4. </div> 
  5.   
  6. <!-- NOTE: <span> is not needed for IE7; whitespace is enough --> 

CSS Code:

  1. div { 
  2.     width150px
  3.     height155px
  4.     line-height155px
  5.     border1px solid #000
  6.     background#f00
  7.     text-aligncenter
  8. img { 
  9.     vertical-alignmiddle
  10. span { 
  11.     display: inline-block

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

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

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

责任编辑:陈四芳 来源: 伯乐在线
相关推荐

2010-09-01 14:41:35

paddingline-heightCSS

2010-08-20 15:50:03

Paddingline-height

2013-10-30 09:57:43

IECSS

2013-10-31 11:12:56

IECSS

2013-09-09 10:51:07

CSSIE浏览器

2013-10-28 14:01:03

IECSS

2010-09-01 10:49:57

CSS水平居中垂直居中

2013-10-31 10:59:23

IECSS

2022-06-22 09:06:54

CSS垂直居中代码

2010-09-09 10:23:23

DIVCSS垂直居中

2013-10-29 15:20:38

IECSS

2010-08-24 14:47:48

CSS居中

2010-09-02 13:03:38

CSS垂直居中

2010-08-31 14:49:57

CSS居中

2010-08-27 10:30:16

CSS垂直居中

2021-07-26 08:31:17

算法

2009-08-13 10:12:07

IE的CSS Bug

2018-09-18 11:20:07

css html5javascript

2010-08-24 13:25:16

DIV+CSS

2010-08-24 14:23:39

DIV居中
点赞
收藏

51CTO技术栈公众号