仕事の雑感

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

Google Chromeだけに起こる

Google Chromeだけに起こる

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

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

a:hover {text-decoration:none;}

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

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

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

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

<a href="http://sp.vitalify.jp/archives/?p=712">chromeでtext-decoration:underline;が効かない。</a>(console.log :))

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

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

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

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

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

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


福本さんのFacebookでのつぶやき

福本さんのFacebookでのつぶやき

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

<a href="http://ossi.co.jp/topics/2013/05/000030.php">Google Chromeで:hover時のアンダーラインが出ない場合の対応</a>(株式会社オッシー)

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

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

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

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

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

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


名村晋治のプロフィール

Webディレクター 名村晋治

株式会社サービシンク

代表取締役 / テクニカルディレクター

名村晋治

1996年よりWeb制作に携わり、キャリア28年目のWebディレクター

2010年に不動産業界特化のWeb制作会社「サービシンク」を設立して、今も現場でディレクターとしてPMをしています。

詳しいプロフィール

大学在学中の1996年「Web制作集団ネイムヴィレッジ」を設立し100社を超えるサイト制作の企画、ディレクション、デザイン、マークアップ、システム開発に携わる。

2000年不動産検索サイトHOME'Sを運営している株式会社LIFULL(旧:ネクスト)に合流。
2005年からは都内のWeb制作会社に合流し取締役を歴任。同社ではフロント実装からディレクションまでを担当。

2010年東京のWeb制作会社・ホームページ制作会社、株式会社サービシンクを立ち上げる。 不動産業界に特化したサイト制作の、アートディレクション~HTML実装設計~システム設計のすべてに携わるジェネラリスト。基軸としてはクライアントの商売に寄り添う為に、徹底的に思考を巡らせる為のディレクションを行う。

Webブランディングの入門教科書」、「変革期のウェブ」を「マイナビ出版」から出版。

2000年から「Webディレクター育成講座」を独自開催し、40時間のカリキュラムを通し「仕事を回す事ができる」Webディレクター育成手法には定評があり。
首都圏のみならず地方でも講座実施、参加者は延べ700人を超える。 もう一つのキャリアとしてプロとして舞台俳優、声優。 1996年から養成所に通い始め2004年に廃業するまでの間はWebディレクターと二足のわらじでの活動。

俳優としては、東京の小劇場でシェイクスピアやマリヴォーといった古典を中心に舞台に出演、また声優としては大きく活躍できる程ではありませんでしたが、NHK海外ドラマや、洋画等、ゲームでの声優を行っていました。

最新の記事

Webディレクター育成講座

900人が受講をし、28年のキャリアを学べる『Webディレクター育成講座』
*/