もずはっく日記(2005年1月)

Re: バナー画像の下線を消す
初回投稿日時: 2005年01月12日01時21分35秒
最終更新日時: 2005年01月12日01時25分41秒
カテゴリ: CSS
SNS: Tweet (list)

久々に純粋なCSSの話題でも。

<a href=""><img>text</a> で、a img { border: 0px; } にすると、img の下線が消えない、<a href=""><img></a>text<a href=""></a> だと消える。

まず、画像の下に表示されている下線はa[href]{ text-decoration: underline; }の下線なので、borderでは消せません。

続いて次の<a href=""><img></a>text<a href=""></a>は<a href=""><img></a><a href="">text</a>のことだと思いますが、そうであれば、前者と後者は意味が異なります。仕様書を見てみましょう。text-decorationには次のようなことが書かれています。

要素に内容又はHTMLのIMG要素などのテキスト内容がない場合，利用者エージェントはこの特性を 無視しなければならない。

つまり、後者の一つめのimg要素しか内容に持たないa要素ではtext-decorationは無視され、二つめのテキストを内容に持つa要素ではtext-decorationは適用されることになります。それに対して前者では画像とテキストを内容に持つので全体にtext-decorationが適用されて、画像の下にも下線が表示される訳です。