ブログ始めて2記事目（ってゆーか実質初記事）にして、
いきなり技術的なことを書き始める今日この頃。
私が一般ユーザーだったら完全に離脱しますね、このブログ。
リピートしない。ユニーク増えない。まぁ大変。
そんな事じゃなくて、本題。
CSS Spriteには色んなやり方があって、
多分、一番正しい使い方はbackgroundのみを対応する方法。
ってゆーか、「文書」なんだから、
そうそう画像使うなってのが、実は正しい見解。
でも、画像無しのサイトなんか商用で作らせてくれないっすよー。
って事で、ボタンやら見出しやらも画像になっている上で、
リクエスト減らしたいからそれもSpriteしたい、ってのが現状。
さらに一歩踏み込むと、text-indentとか、display:noneとか、
それって今後サーチエンジンにスパム扱いされないか不安だし。
空のspanで上に被せる方法も構文的にエラー出るからちょっと悩む。
だもんで、CSS切るとえらいことになるって分かっているけど、
Googleトップ方式で親要素に幅高さ持たせて、画像はtop/left指定、
ってのが無難かなぁ…と思っている人も多いと思うんです。
そんな訳で、ボタンをそのように作ったところ。
■HTML
<p id="n1"><a href="foo.html"><img src="navi.png" /></a></p>
■CSS
#n1{
position:relative;
overflow:hidden;
width:100px;
height:20px;
}
#n1 img{
position:relative;
top:0;
left:0;
}
#n1 a:hover img{
top:-20px;
}
<p id="n1"><a href="foo.html"><img src="navi.png" /></a></p>
■CSS
#n1{
position:relative;
overflow:hidden;
width:100px;
height:20px;
}
#n1 img{
position:relative;
top:0;
left:0;
}
#n1 a:hover img{
top:-20px;
}
……IE6とIE7でまったく動きません（泣）
もう、このブラウザ達ホント消えて欲しい。。。と、思うものの、
残念ながらプロなんで笑顔でクロスブラウザ対応をせねばならない。
↓解決しましたよ！
■HTML
<p id="n1"><a href="foo.html"><img src="navi.png" /></a></p>
■CSS
#n1{
position:relative;
overflow:hidden;
width:100px;
height:20px;
}
#n1 img{
position:relative;
top:0;
left:0;
}
#n1 a:hover{
border:none;
}
#n1 a:hover img{
top:-20px;
}
<p id="n1"><a href="foo.html"><img src="navi.png" /></a></p>
■CSS
#n1{
position:relative;
overflow:hidden;
width:100px;
height:20px;
}
#n1 img{
position:relative;
top:0;
left:0;
}
#n1 a:hover{
border:none;
}
#n1 a:hover img{
top:-20px;
}
【結論】
IE6・7では、「a:hover」の子要素img “ のみ ” に、
スタイルを適用させることが出来ません。
「a:hover」自体 “ にも ”影響無さそうなスタイルを、
適用させてあげる事で回避できます。
……バグでしょう、もう、これ（泣）
ちなみに、この「a:hover」に適用させるスタイルですが、
効くやつと効かないやつがありました。border、margin、paddinngはOK。
clearとか、topとか、disprayとか無理っぽい。
完全に意味不明ですが、回避出来るならよしとしよう。
煮詰まった時には、ぜひご利用ください。
ではでは☆