CONFIDELIC

Chromeでフォントサイズ10px相当の場合にリンク下線が消える

こんなバグが上がってきたのでメモ。

【現象】
10pxのテキストリンクをマウスオーバーした場合の下線が表示されません。
※Chromeで発生。ブラウザの拡大/縮小が100%の状態で表示されません。(110%では表示されます。)
【期待値】
Chrome使用時、テキストリンクをマウスオーバーした場合の下線が表示されること

まずリンクへのtext-decolationの設定は、このようにしていた。
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{text-decoration:underline;}
a:focus{text-decoration:underline;}

この設定が入っていたにもかかわらず、10pxのテキストリンクにマウスカーソルが乗ってもリンク下線が出なかった。
しかし、他の場所にある同じ条件のリンクでは、下線が出るケースがある。。。。。

スタイルの影響が考えられるとすれば…
line-hightか、paddingか、marginか、font-sizeか、font-familyか…
しかし、この辺り変えてしまうと他のブラウザにも影響があるので、Chromeだけ何とか対応したいが、調べていくとどうもChromeのバグっぽい。

それぞれのプロパティを少しずつ変えてみたところ、

line-hight…変えても効果なし
padding…padding-bottom: 1px;を入れると下線が出た。
margin…変えても効果なし
font-size…9pxでは下線が出ないが、11pxなら出る。
font-family…arialを指定したら下線が出た。sans-serifやMS Pゴシックでは下線が出ない。

という結果に。

余白やフォント設定が影響している感じはするが、どうにもつかみどころのない感じ。
しかもついでに違うバグまで見つかってしまった。。。。。。。。。。

「10pxのテキストリンクで、通常時とオンマウス時でリンク色を変えている場合にオンマウス時に下線の色だけ通常時の色になる！」

もう知りません。

Tags: Chrome, バグ, ブラウザ