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

nighca發表於2013-10-29

伯樂線上導讀：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:

<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;
}

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中新增空格。（也就是說，<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 -->

<div>

</div>