Firefox:「画像+文字」をaタグで囲むと画像にも下線(text-decoration:underline)が出る

15 10月

自分用覚え書き。

たとえば、

<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だけだと下線はつきません。これバグ?仕様?なんにしてもソースがとても気持ち悪いことになっちゃうなー。

3 thoughts on “Firefox:「画像+文字」をaタグで囲むと画像にも下線(text-decoration:underline)が出る

  1. IEでのみ意図どおりに表示されるのでこれはIEがダメ実装なんだろうなと思ってましたが(笑)、なるほど仕様なんですねぇ。
    # Each line of text is underlined.とか言ってるので、
    # テキストだけが対象であるべきなのかなと勝手に解釈してました。

    いかんせんソースがスパンスパンして気持ち悪いのですが、何かスマートな解決法はないものかしら。

  2. 改行入るの前提ですが、画像をブロックにすると避けられると思います。

    ↓スタイル

    .thumbnail{
    display: block;
    float: left;
    }

    .thumbnail img{
    display: block;
    border: none;
    }

    ↓html
    ほんだららった

Comments are closed.