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

图片上没有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"  width="95" height="115"></div>
3. <!-- NOTE: no white-space in the <div> also triggers bug in IE7 -->

CSS Code：

1. div {
2.     width: 150px;
3.     height: 155px;
4.     line-height: 155px;
5.     text-align: center;
6. }
7. img {
8.     vertical-align: middle;
9. }

在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"  width="95" height="115">
3.     <span></span>
4. </div>
6. <!-- NOTE: <span> is not needed for IE7; whitespace is enough -->

CSS Code：

1. div {
2.     width: 150px;
3.     height: 155px;
4.     line-height: 155px;
5.     border: 1px solid #000;
6.     background: #f00;
7.     text-align: center;
8. }
9. img {
10.     vertical-align: middle;
11. }
12. span {
13.     display: inline-block;
14. }

注意我们添加了一个额外的span从而在7以下版本的IE中修复该bug；我们还将display属性设置为inline-block来使我们关键的span拥有“layout”。最后结果：一切都正常了。 原文链接： haslayout   翻译： 伯乐在线 - nighca译文链接： http://blog.jobbole.com/49703/

标签：网页前端