2010-05-07

[CSS] Chromeでhoverのunderlineが表示されない

ものすごいマイナーな現象だとは思うのですが、、
Chromeでaタグには text-decoration:none; とし、a:hoverで text-decoration:underline;としたのですが、
なぜかアンダーラインが表示されません。

いろいろ原因を探っていたところ、特定のフォントで、font-size:10px(またはx-small)としたときに、
この現象が起こることに気付きました。

11pxのサイズではちゃんとアンダーラインが出ましたし、
Verdanaなどのちょっと大きめのフォントでは問題なかったのですが、
特にfont-familyを指定しなかったりするとこの現象が起こります。

いくつか解決策はあると思うのですが、

a:hover {
font-size:x-small;
padding-bottom:1px;
}


としたらちゃんとアンダーラインが表示されました。

コメント / トラックバック 1 件

  1. […] [CSS] Chromeでhoverのunderlineが表示されない|around design […]

Comment:

Trackback URL: