画像のロールオーバーがずれてしまいます。（CSS）

質問

テーブルを作り、tdタグの一箇所の背景にロールオーバー時の画像を配置しておき、a要素にマウスがかかった際にtd内にあるimg要素にvisibility:hidden;にするというロールオーバーを作りたいと思っています。

しかし実際に作ってブラウザで見てみると、ロールオーバー後の画像
（背景として設定しているもの）が微妙に１pxほど斜め下にずれて表示されてしまいます。
このような事を防ぐためにはどんな事に気を付ければ良いでしょうか？

ちなみに、ロールオーバー前の画像とロールオーバー後の画像２枚を
全く同じサイズにしています。
参考までにタグを下記に記述していますので、どなたか見て頂けませんでしょうか。宜しくお願いいたします。

-------------------------------------------------CSS

td.1{
　　　background:url(image01.jpg) no-repeat;
　　　}

td.1 a{
display:block;
}

td.1 a:hover{
background-color:transparent;
}

td.1 a:hover img{
visibility:hidden;
}

-------------------------------------------------HTML
<table>
<tr>
<td class="1"> ←このtd内の画像
<a href="top.html"><img src="image01.jpg"></a>
</td>
<td>
<a href="top02.html"><img src="image02.jpg"></a>
</td>
<td>
<a href="top03.html"><img src="image03.jpg"></a>
</td>
</tr>
</table>

回答No.1

steel_gray · ベストアンサー

大抵のブラウザはデフォルトでセルにpaddingが設定されているので、
それを0にしないとpaddingの影響を受けない背景とはずれるのかな。

お礼

steel_grayさん、ありがとうございます。
テーブルにpadding:0;を追加したら無事重なって表示されるようになりました。