CSSでスクロールボックス

質問

div要素を使ってスクロールボックスのようなものを作っているのですが、その中にa:hoverを使ったリンクがあり、このリンクにマウスカーソルを持ってくると、スクロールボックス自体が下の方に移動してしまいます。
Internet Explorerでだけこの現象が発生します。FirefoxやOperaでは問題ありません。
何か解決方法はないでしょうか。
一応以下にソースを載せます。縦方向のスクロールする行が多いほど、移動する量も大きくなります。

--- css ---
div.test {
width: 90%;
height: 100px;
border: 1px solid #003333;
overflow: scroll;
}

a.test:link, a.test:visited {
color: #000000;
text-decoration: underline;
}

a.test:hover {
color: #ffffff;
background-color: #999999;
text-decoration: none;
}
--- End ---

--- html ---
<div class="test">
<table class="test" align="center">
<tr>
<th width="100px"><a class="test" href="test.html">Col1</a></th>
<th width="100px"><a class="test" href="test.html">Col2</a></th>
<th width="100px"><a class="test" href="test.html">Col3</a></th>
<tr>
<td nowrap>data1</td>
<td nowrap>data2</td>
<td nowrap>data3</td>
</tr>
以下、同じようにあと10行程度追加
</table>
</div>

回答No.1

suzuki-_- · ベストアンサー

> <table class="test" align="center">

根本的な理由はわかりませんが、ここのalign="center"が悪さしてるようです
色々兼ね合いでバグが起きたといった感じでしょうか

html側は

<table class="test">

と変更し、tableをセンタリングをするために、
css側のdiv.test{}内に text-align:center; をIE用に追加(1)、
新たな指定要素設定として table.test {margin:0 auto;} を追加すれば解決すると思います

XHTMLなら(1)部分は必要ないです

お礼

IE以外のブラウザ用にalign="center"を入れていたのですが、
margin:autoでイケるんですね。
ありがとうございました。