1. アドベネック
  2. アドベネックのブログ
  3. HTML
  4. safariでテキストリンクに余白が入ってしまう原因

Posted on Jun 28, 2016 by Naitou

safariでテキストリンクに余白が入ってしまう原因

記事カテゴリー: HTML

CSSの設定が原因でsafariでのみ余白が発生する問題の対処法をご紹介。

発生条件

MacのSafariで弊社サイトを見ると、テキストリンクの右側に余白が発生していました。

font_1

font-family

ネットで調べてみると、どうやらfont-familyの指定によって発生しているようです。
font-familyにosakaが含まれていると、safariで余白が発生します。
font-familyからosakaを削除した所、余白は消えました。

font_2

wordpressでの注意点

wordpressではテーマのテンプレートでfont-familyが指定されている場合があります。
この場合はテンプレートのcssを編集してfont-familyからosakaを削除するか、子テーマでfont-familyを再設定し、設定を上書きする事で余白の発生を回避出来ます。

この記事をシェアする

このカテゴリーの一覧に戻る

内藤

この記事の投稿者

内藤Naitou

高専、専門学校卒という独学派が多いアドベネックの中で唯一コンピューター言語を学校で学んだスタッフでありながら、ペンタブレットを使ったイラスト作成なども担当できるレアキャラ。NINTENDO好き。ゲームを買って積んでおくのが趣味。

  • Ps
  • Ai
  • Dw

同じカテゴリーの投稿

最近の投稿

記事のカテゴリー

アドベネックのSNS