IE6・7で確認すると、マウスオーバーした時の文字とアンダーラインがくっついてしまいます

質問

以下のようにCSSで指定しているのですが、
Firefoxで確認すると少し隙間があって丁度よいのですが、
IE6・7で確認すると文字にアンダーラインが乗っかってしまっているようにみえ、文字が少しみえづらくなってしまっています。
こちらを回避する方法はありますでしょうか？

a:hover {
font-weight: bold;
　　text-decoration:underline;
　　　}
ちなみにフォントサイズは
font-size: 10px;と指定しています。

例の出し方が適切じゃないかもしれません。
仕事で使っているので、どこまでどう出していいのか
よくわからず・・・
すみませんが、わかる方がいたら教えていただけないでしょうか？

回答No.1

warez

border でアンダーライン風にする手段はどうでしょうか。

a {
text-decoration: none;
border-bottom: none;
padding-bottom: 2px;
}

a:hover {
text-decoration: none;
border-bottom: 1px solid blue;
padding-bottom: 2px;
}

padding-bottom で文字との間隔を調整してください。

お礼

お礼が遅くなってしまいすみませんでした。
こういう方法もありますね。

ありがとうございます。
ちょっと試してみます。