日記

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

Google Chromeだけに起こる

Google Chromeだけに起こる

先日このブログの新しいデザインのものを静的な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で同じ事をつぶやいていました


福本さんの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。
また福本さん、良記事ありがとうございます!


著者・名村晋治のプロフィール

名村晋治

株式会社サービシンク

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

名村晋治

不動産業界に特化したWebサイト制作・システム開発をおこなうサービシンクでプロデュース、ディレクションからテクニカル・ディレクターまでを担当。
元プロの声優であり、Webディレクターとして22年のキャリアを持つ。
(詳細は下の「詳しいプロフィール」をクリックしてみてください。

Webブランディングの入門教科書」、「変革期のウェブ」を毎日コミュニケーションズから出版してます。

詳しいプロフィール

大学二年生の96年からWebの制作集団ネイムヴィレッジを主催。
大学卒業の99年までの間に100社ほどのサイト制作の企画、ディレクション、デザイン、Perlでの開発、マークアップに携わる。
大学卒業と同時に俳優になるために上京し俳優修業開始。
2000年からは俳優修業の傍ら不動産検索サイトHOME'Sを運営している株式会社LIFULL(旧:ネクスト)に合流。
俳優としては、舞台演劇、プロの声優としても活動したが最終的30歳を目前に足を洗う。

2005年に株式会社LIFULLが自社媒体に注力するためSips業から撤退する事をきっかけとして、代表の井上とシェイクハンドをして退社。

2005年から株式会社ソナーに合流し取締役なども歴任し不動産業界のサイト制作のディレクションからフロント実装を担当。

2010年1月12日から株式会社サービシンクを立ち上げ、代表取締役に就任。
不動産業界に特化したサイト制作のアートディレクション~HTML実装設計~システム設計のすべてに携わるジェネラリスト。
基軸としてはクライアントの商売に寄り添うために、徹底的に思考を巡らせるためのディレクションを行う。
Webブランディングの入門教科書」、「変革期のウェブ」を毎日コミュニケーションズから出版してます。

最新の記事