この日記はMozillaのプロダクトへの貢献者としての私の成果を中心に、気になったバグやWeb界隈の話題について書いていますが、 断り書きがある場合を除き、いかなる団体のオフィシャルな見解ではありません。あくまでも個人的なものです。 Mozilla Foundation、Mozilla Corporation、及び関連企業の公式情報ではないことに注意してください。

現在、XHTML 1.0 (もどき)から、HTML5なコンテンツに修正中です。古い日記は修正が完了していませんので表示が崩れます。 順次、修正していく予定ですのでしばらくお待ちください。

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

2005年1月12日

Re: バナー画像の下線を消す
初回投稿日時: 2005年01月12日01時21分35秒
最終更新日時: 2005年01月12日01時25分41秒
カテゴリ: CSS
SNS: (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が適用されて、画像の下にも下線が表示される訳です。

関連するかもしれないエントリ

関連するかもしれないエントリを発見できませんでしたが、無いとは限りません。