IEでaタグのhoverでボーダーが表示される指定だと1pxずれる

cssでaタグにオーバーしないときはアンダーラインを
表示させない設定にしといて、a:hoverで表示させる
ときに、なぜかIEだと表示されるときに下にずれる。
firefoxやchromeとか他のブラウザだと起きていない。

IEのバグかなぁと思っていろいろ探したがよい解決方法が
見当たらなかったが、なんとか解決したのでメモ

解決方法

smallタグをaタグの外に書く。
<a href="">ほげほげ</a>

このやり方は今回の場合だったので正しい解決の仕方
なのかは分かりません。

aタグのhoverでボーダーが表示されと1px下に動く

CSSの設定

a:link {
 text-decoration: none;
}

a:hover {
 text-decoration: underline;
}

これでアンカーテキストをマウスオーバーすると
下にボーダーが表示される。
このときに下に動いてしまう。

見た感じ1pxずれているのでaタグにpadding-bottomで1px指定
すればいけるかなぁと思ってやってみたら
直った。

これでOKって思ってクロームで見たら崩れはしないが
ボーダーが表示されない。
この方法は違うと思って再度デバッグ作業

っでなんとか解決したのでメモ

今回の解決方法は私の場合なのでもしかしたら解決しない
ことがあると思います。

まず、問題が発生している箇所を見るとこうなっていたので

<a href="">ほげほげ</a>

smallタグをaタグの外に出してあげた。
<a href="">ほげほげ</a>

これだけ問題解決しました！
ん・・・。いいのでしょうか

これだと何かスッキリしないのでもう少し調べた。
違うパターンで

ここにテキストを入れる<a href="">ほげほげ</a>

このようにaタグの前にテキストが入っていると
1pxずれる現象は発生しません。

また、この現象が発生していないaタグにsmallタグを入れたら
発生するだろうと思って

<a href="">ほげほげ</a>

こう書いてもなりませんでした。
そして、smallタグを使わないと発生しません。
ん・・・。何なんでしょうか？

そこで実験してみました。
aタグのhoverでアンダーラインが表示されない問題

たぶん推測ですが、aタグの中にsmallタグを書くと高さが違うので
それかな？って思いました。
ブロック要素で囲まれると高確率でなる感じがします。

解決はできましたが、完全な発生条件が特定できませんでした。
誰か知っている方、教えていただければ助かります。