所謂テキストリンクの a 要素をプロック化し、padding でテキストを追い出し、背景画像だけを表示する技法の考察。
link-b-link.png link-b-hover.png
■ HTML 4.01 strict
上記のようなテキストリンクを 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 ;
}
さて、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 strict です。他のモードも確認したい人は、ISO/IEC 15445:2000 版・HTML 4.01 Transitional 版もどうぞ。