イメージにラインハイトの垂直センタリングなし
影響を受けるIEのバージョン
このバグはIE7、IE6に影響します。
現れ
line-heightメソッドを使用すると、イメージが垂直方向にセンタリングされません。
チュートリアル開発時間
2009.7.18 11:39:56
説明
このバグは私の脳細胞の多くを殺します。私は以前、見栄えをよくするために、同じサイズのボックスにサイズの違うイメージをたくさん入れた「商品ページ」を作っていました。このバグの回避策を見つけた後も、私はこのバグが嫌いです。とにかく、例を見てください。
例
HTMLコード
<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コード
div {
width: 150px;
height: 155px;
line-height: 155px;
text-align: center;
}
img {
vertical-align: middle;
}
IE8以下のIEでは、テントウムシのイメージが縦中央に表示されません。
処方
上記バグの回避策は以下の通りです。
溶液 （クリーンラベル法）
メソッドの時間
2009.7.18 11:52:58
修理可能バージョン
このバグの影響を受けるすべてのバージョン
説明
この回避策は「クリーンなマークアップの回避策」となっているので、もしサポートしているIEの最低バージョンが7であれば、divにスペースを追加するだけでよいことに注意してください。(つまり、<span>要素は IE のバージョン7以下でのみ必要です)
例
HTMLコード
<div>
<img src="hl_logo.png" alt="" width="95" height="115">
<span></span>
</div>
<!-- NOTE: <span> is not needed for IE7; whitespace is enough -->
CSSコード
div {
width: 150px;
height: 155px;
line-height: 155px;
border: 1px solid #000;
background: #f00;
text-align: center;
}
img {
vertical-align: middle;
}
span {
display: inline-block;
}
また、displayプロパティをinline-blockに設定し、キーとなるスパンに"layout"を持たせています。結果：すべてうまくいきました。
