CSS のお勉強：所謂、画像置換の方法

1. クリックしる → a 要素の後ろにテキスト
2. リンク → a 要素の後ろにテキスト

上記のようなテキストリンクを a : hover で a 要素の背景画像なしにして、li 要素の背景画像が見えるようにする。

1. は、li { background-position : top center ; } 、2. は、li { background-position : bottom center ; } に指定。

---

それでは、サンプル

---

ソース

<ol class="alt">
<li id="A"><a href="#" title="クリックしる">クリックしる</a> → a 要素の後ろにテキスト</li>
<li id="B"><a href="urn:nai" title="リンク">リンク</a> → a 要素の後ろにテキスト</li>
</ol>

スタイルシート

ol.alt {
	margin : 0 ;
	padding : 0 ;
	list-style-type : none ;
}

ol.alt li {
	margin : 0 20px 20px 0  ;
	padding : 0 ;
	list-style-type : none ;
	float : left ;
	width : 80px ;
	height : 80px ;
	overflow : hidden ;
	border : 1px solid red ;
	background-image : url(link-b-hover.png) ;
	background-repeat : no-repeat ;
}

ol.alt li#A {
	background-position : top center ;
}

ol.alt li#B {
	background-position : bottom center ;
}

ol.alt li a {
	display : block ;
	width : 80px ;
	height : 0 ;
	margin : 0 ;
	padding : 80px 0 0 0 ;
	background-repeat : no-repeat ;
	background-position : top center ;
	text-decoration : none ;
	overflow : hidden ;
	background-image : url(link-b-link.png) ;
}

ol.alt li a:link {
	color : blue ;
	background-image : url(link-b-link.png) ;
}

ol.alt li a:hover {
	color : red ;
	background-image : none ;
	background-color : transparent ;
}

---

WinIE6 の解釈

さて、Firefox 、Opera 、Safari 等では、1. のリンクも 2. のリンクも同じスタイルのように見えるのですが、WinIE6 では、2 つのスタイルに違いが発生します。

そうです。2. の方は、背景画像がずれてますね。

さて、上記例では、a 要素をブロック化したので、続くテキストは、通常のように a 要素の右ではなく、下に続く事になりますが、li 要素は高さ 80 px 固定で、しかもオーバフロー部分は不可視になりますので、テキストは見えなくなります。

ここで、1. は background-position : top center ; 、2. は background-position : bottom center ; としたので、どうやら、bottom の算定基準に違いが発生したようです。

つまり、Firefox 等は、li 要素の可視範囲をボックスの境界と捉え、背景画像もそれに従って配置されているようですが、WinIE6 では、不可視範囲もボックスとして勘定するらしく、背景画像は、（現在は不可視状態の）「続くテキスト部分」の底辺部を基準に配置されているのではないかと。

どっちが正しいのかは、仕様書を読むか、エラい人に聞いてください。

ちなみに、WinIE7 も IE6 と同じ状況です。

ところで、この文書は HTML 4.01 Transitional です。他のモードも確認したい人は、ISO/IEC 15445:2000 版・HTML 4.01 strict 版もどうぞ。