Google Chromeでtext-decorationのnoneが効かない件。

先日このブログの新しいデザインのものを静的なHTMLで作っていました。
まぁ、結果としては、2日ぐらい寝かせると全く気に入らなくなったので、お蔵いりしました(笑)

で、問題はそのHTMLを作っている時です。
このブログの右側にもあるいくつかのテキストリンクエリアに、マウスhover時に、下線を消すようにしたくて、

a:hover {text-decoration:none;}

を指定したんです。
まぁ、なんという事もない誰でも知ってる書き方です。

なぜかGoogle Chromeで下線が消えない?!

そして、いざGoogle Chromeでみてみると・・・マウスを乗せても下線が消えません。
HTMLを書いていてレンダリングチェックに最初Chromeを使っていたので、「あれ?何か継承間違いしてる?」と思って色々変えてみたけど、やっぱり変わらない。

ということで問題切り分けを・・・と思い、他のブラウザで見てみたら、ちゃんと動いている。
ますます意味が分からなくなり、「これはバグか?」と思いぐぐってみるけど、なかなかそれっぽい内容は出てこない。
という中でやっと見つかったのがこちらのブログ。

chromeでtext-decoration:underline;が効かない。(console.log :))

こちらを拝見して、名村が試してみたのは、

padding-bottom:1px;を入れる。

というもの。
すると確かに下線の処理が正しく動くようになりました。他のブラウザでも実際にpadding-marginが1px増えたこと以外は影響なし。

まぁ、表示されたといえばされたので、いいのかもしれないのですが、なんとなく釈然とはしません。

オッシーの福本さんが、ほぼ同じタイミングでFacebookコメントに同じ事を書いていた!

とりあえず下線は表示されたのですが、なんとなくモヤモヤしていたら、丁度その時「親方」とお呼びしている株式会社オッシーの福本さんがFacebookで同じ事をつぶやいていました。

株式会社オッシーさんは、HTMLのコーディングに特化された会社さんで、その親方すら「?!」と思った内容でもあり、丁度数十分前に同じ事で詰まっていたってことで、コメントをしてたら、なんと福本さんが後日自社のブログにまとめてくださいました!

Google Chromeで:hover時のアンダーラインが出ない場合の対応(株式会社オッシー)

福本さんが調べてくれ、ブログに記載された内容を参照するに、

1. CSS側のサイズ指定ではなく、ブラウザで10px以下のサイズでレンダリングされたときに発症する。
2. したがってfont-size:.8emとか80%とかの指定をした場合でもレンダリングサイズが10px以下になれば発症する。
3. 同様にブラウザ側のズームが等倍(100%/デフォルト)で表示していた時に発症していても、拡大すれば下線は表示される(直る)。
4. 逆に発症していなくてもブラウザ側のズームを縮小して文字が10px以下になれば発症する(なんか、これは別のバグもついてくる)。
5. aがブロックの時は発症しない。
   (Google Chromeで:hover時のアンダーラインが出ない場合の対応より引用)

ということらしく、確かに僕はこの条件に該当していました。
結果的に解消方法としては、

1. .aの下方向のパディング(padding-bottom)を1px以上取る。(既出)
2. displayプロパティをblockまたはinline-blockにする。
3. 10.5px以上のサイズにする。(10pxよりも大きなサイズでレンダリングされる指定を行う)。
   (Google Chromeで:hover時のアンダーラインが出ない場合の対応より引用)

とのことでした。
まぁ、殆ど出ることはないバグなのかもしれないですが、下線が出る出ない、ってのは実装したら如実に分かるし、UI的にも意味があるものなので、Progressive Enhancementと割り切るのもなかなか難しい内容かと思います。

ということで、自分への備忘録的にPOST。
また福本さん、良記事ありがとうございます!