リンクがついた画像の下線を消す方法

<a>タグの中に<img>タグを入れたら画像の下に下線が付いてしまいます。アフォーダンスを応用したボタンや明らかにクリックできるバナーなどに下線がつくのは好ましくないので、この下線を消す方法を紹介します。

HTMLを記述

 
<p><a href="http://www.webbibo.com/">CSSのTipsサイト「webbibo」<img src="./images/img_underline_01.png" /></a>でCSSのテクニックを公開しています。個人の備忘録として初めましたが、自分と同じCSSに悩まされた人にも解決していただきたく、このようなページを設けて公開しています。</p>
 

CSSを記述

 
a img {
    margin: 0px 0px -6px 0px;
    border: 3px solid #FFFFFF;
}
 

→画像に付いた下線を消したサンプル

画像の周りに背景色と同じボーダーを指定し、このボーダーの幅だけネガティブマージンを与えます。フォントの種類にもよりますけど、大体のブラウザで画像と下線の位置は揃います。

Firefoxだと文字と下線の間が空いているので、少しずれてしまいます。フォントの種類によるものだと思いますが、揃える方法を知っている方是非教えてください。