画像にリンクを指定すると下線が表示される

画像にリンクしたいということはよくあると思うが、text-decoration:none;で下線を消してみるもFirefoxではうまくいかない場合があった。以下のようなクラスが先に指定されていてその後に画像という具合だ。
<p class="test"><a href="image-zoom.html"><img src="test.gif" alt="" width="100" height="100" /></a></p>
そこからいろいろ試した結果、vertical-alignに問題があった。
vertical-alignにtopを指定すると画像の位置に変更が加わり下線が消えるようになる。
これがbottomだとなぜだかうまくいかなかったので下記の通りにCSSを記述したら大丈夫だった。

.test a img{

	vertical-align:top;

	text-decoration:none;

}

vertical-alignは画像やテーブルのセルに対してあらかじめ指定しておくものだが、
ときにはCSSの作成者が違うと記述も変わってきて指定する値も変わってくる。
そういった場合は改めてほかのプロパティや値を見直すことが必要かもしれない。