Google Chromeとtext-decoration:underline;のエラーについて

web制作

※この記事は、作成日より一年以上が経過しています。最新の情報ではありませんので、ご注意ください。

読了の目安時間: 145

GoogleChromeとtext-decoration:underline;の相性って仕様上、良くないみたいですね。コーダーの人は遭遇したことのあるエラーかと思います。chromeブラウザの仕様上、テキストリンクの下線部分に脆弱性を持っているらしく、どうしてもエラーの起きてしまう場合があるようです。対応法も含め、ご参考までに記事にしておきます。

Chromeとテキストリンク下線部の相性の悪さって?

テキストリンクのオンオフでゴミ(ポチ点)が残ってしまう場合

▼GoogleのニュースサイトでテキストリンクのURLにマウスホバーしてみると下線が浮かび・・・

chrome_error1

▼マウスホバー離すと・・・あれ、小さなゴミが残ってます。(ブラウザ画面を拡縮すると、発見しやすいです。)

chrome_error2

テキストリンクのオンオフそのものが機能しない場合

▼こちらはweb会社ブログで有名なLIGさんのウェブサイト。こちらの記事、下線付URLがchromeでは下線消えず、他ブラウザでは消える状態です。

chrome_error3

どういう時に起きるエラーなの?

色々なブログを参考にしたところ、どうもフォントサイズが最も大きな要因のようです。ある一定のサイズ以下だと、テキストリンクの下線とバグが起きてしまうようです。

対応策

他のウェブサイト様の情報では・・・

1.aの下方向のパディング(padding-bottom)を1px以上取る。
2.displayプロパティをblockまたはinline-blockにする。
3.10.5px以上のサイズにする。(10pxより大きなサイズでレンダリングされる指定を実施)

最悪の場合は・・・

マウスホバーをした時にユーザーへクリッカブル性を示す際は、あまり下線部によるオンオフには頼らないほうが良いです。そもそも流行ではありませんし、デザイン的にもかっこよくないですしね。Chromeで下線部のエラーが起きてきたら、原因を追究するのではなく、さっさと他の背景の色変えや、文字の色変えなどを利用したほうが賢明です。
正直、ポチ点のエラー出ると、改善のしようがない。(ブラウザ仕様上の問題である可能性が高く、エラーの再現性をあまり得られないため。)

今読んだ記事をシェアする

chrome_thumb

Google Chromeとtext-decoration:underline;のエラーについて

  • このエントリーをはてなブックマークに追加
  • Pocket

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。現在、サーバー・アプリなどを習得中です。性格は、自虐好きです。