IE対策：改行される可能性のあるインライン要素に背景画像を指定しない - 我流天性 - がらくた屋

このサンプルHTMLはエントリー「IE対策：改行される可能性のあるインライン要素に背景画像を指定しない」で書いたものです。

改行されるインライン要素に背景画像を指定した場合（IEでは正しく表示されない）

サンプルコード

NO	項目名
1	ファイル名ファイル名ファイル名
2	ファイル名ファイル名ファイル名ファイル名
3	ファイル名ファイル名ファイル名ファイル名ファイル名

IE6 スクリーンショット1

CSS

a.icon1 {
	padding:2px 20px 2px 0;
	background:url(icon_pdf.gif) no-repeat right center;
}

HTML

<a href="#" class="icon1">ファイル名ファイル名ファイル名ファイル名</a>

IE以外モダンブラウザでは正しく表示される。
IEでY軸右中央寄せ[ background-position:right center ]だと画像が半分で途切れる場合も。
IEでY軸右下寄せ[ background-position:right bottom ] だと、BOX幅での一番最後の行の右側に表示しようとするため見えなくなる。

IE対策でzoom1を入れた場合（不完全）

サンプルコード

NO	項目名
1	ファイル名ファイル名ファイル名
2	ファイル名ファイル名ファイル名ファイル名
3	ファイル名ファイル名ファイル名ファイル名ファイル名

IE6 スクリーンショット2

CSS

a.icon2 {
	zoom:1;
	padding:2px 20px 2px 0;
	background:url(icon_pdf.gif) no-repeat right center;
}

HTML

<a href="#" class="icon2">ファイル名ファイル名ファイル名</a>

IE以外モダンブラウザでは正しく表示されるが、IE(6,7)ではインラインの全体の高さに対して背景画像のY座標が判断され表示がおかしくなる。

インライン要素の最後に背景画像を指定したspanを使う（一応解決な回避策）

サンプルコード

NO	項目名
1	ファイル名ファイル名ファイル名
2	ファイル名ファイル名ファイル名ファイル名
3	ファイル名ファイル名ファイル名ファイル名ファイル名

IE6 スクリーンショット3

CSS

a.icon3 {
	padding:0 20px 0 0;
}
	a.icon3 span{
		padding:2px 20px 2px 0;
		background:url(icon_pdf.gif) no-repeat right center;
	}

HTML

<a href="#" class="icon3">ファイル名ファイル名ファイル名ファイル名<span>&nbsp;</span></a>

空spanを使うのが問題だが、IEでもインライン要素の最後に表示される。
親要素Aタグにもpadding-rightを指定していた方が無難っぽい。

我流天性 - がらくた屋 の記事に戻る