自分用覚え書き。
たとえば、
<a href="hoge.html"><img src="fuga.jpg" />ほんだららった</a>
等としたとき、CSSでaタグに
a:hover{text-decoration:underline;
なんてことをしておくと、hover時に textではないimg要素にも下線が表示されるようになっちゃうみたい@firefox3.0.3。
暫定的解決策: ■ http://www.webmasterworld.com/forum83/7442.htm
<a href="hoge.html"><img src="fuga.jpg" /><span>ほんだららった</span></a>
上記のようにテキスト部分をspanでくくっちゃって、
a:hover span{text-decoration:underline;}
としてやるとテキストだけにunderlineされるようになる。
ちなみにa要素の中身がimgだけだと下線はつきません。これバグ?仕様?なんにしてもソースがとても気持ち悪いことになっちゃうなー。
なんとなく、仕様書読んでると(怪しい英語力で)imgだけの場合、線が出ないって仕様は正しい感じがします。。仕様書どおりにブラウザ作ってるからそうなるんですかね、、?
http://www.w3.org/TR/CSS21/text.html#lining-striking-props
IEでのみ意図どおりに表示されるのでこれはIEがダメ実装なんだろうなと思ってましたが(笑)、なるほど仕様なんですねぇ。
# Each line of text is underlined.とか言ってるので、
# テキストだけが対象であるべきなのかなと勝手に解釈してました。
いかんせんソースがスパンスパンして気持ち悪いのですが、何かスマートな解決法はないものかしら。
改行入るの前提ですが、画像をブロックにすると避けられると思います。
↓スタイル
.thumbnail{
display: block;
float: left;
}
.thumbnail img{
display: block;
border: none;
}
↓html
ほんだららった