WEBデザイン・プログラミング関連の
情報発信を手掛ける STAND4U

HOME > WEB制作 > IE11で謎のテキスト余白? 原因は游ゴシック体・游明朝体とIE11の相性だった！

IE11で謎のテキスト余白? 原因は游ゴシック体・游明朝体とIE11の相性だった！

IE11でテキストに起こる謎の余白の原因は？

WEBサイトのhtmlをコーディングする際、IE11だけテキストに謎の余白に遭遇する事がある。本文などのテキストでは気づきにくいが、見出しなどデザイン上、罫線や背景色などでテキストを囲った状態の場合、テキストの上下の余白がIE11だけ違う事に気づく時がある。いつも起こっているわけじゃなかったので、原因がどこにあるのかわかるのに少し時間がかかりました。

調べた結果、フォントの指定を「游ゴシック体・游明朝体」にしている時に、IE11で謎の余白が空いてしまう事がわかったので、その現象の詳細と対策法を書きたいと思います。

［景品表示法に基づく表記］ 本コンテンツにはプロモーションが含まれています。

游ゴシック体・游明朝体はWindowsとMac両方にインストールされている貴重なフォント

游ゴシック体・游明朝体は、MacではOSX Mavericksから、WindowsではWindows8.1から標準でインストールされたフォントです。WEBデザインにおいて、MacとWindowsの見ためを合わせる為にできれば共通のフォントで合わせたいところです。しかしまたしても問題児のIEは、そのMacとWindowsの夢のコラボを許してくれないようです。

IE11の謎のテキスト余白を検証してみよう

検証コード

p{
    border: 1px solid #999;
    font-size: 13px;
    margin: 20px;
    line-height: 1.0 ;
    padding: 20px;
  }
  .yu-gothic {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
  }
  .yu-mincho {
  font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
  }
  .meiryo {
    font-family: "メイリオ", Meiryo, sans-serif;
  }
<p class="yu-gothic">これは游ゴシック体のテキストです。</p>
<p class="yu-mincho">これは游明朝のテキストです。</p>
<p class="meiryo">これはメイリオのテキストです。</p>

各種ブラウザのキャプチャ

IE11のキャプチャ

chromeのキャプチャ

Firefoxのキャプチャ

検証結果

各種ブラウザのキャプチャを確認頂くとわかるように、IE11の「游ゴシック体・游明朝体」だけ下に余白が空いてしまっている事がわかる。残念すぎるIE11のバグにも何らかの対処が必要です。

対処方法

対処方法として考えられるのは、

  • IE11のみハックで、CSSで上下の余白を調整する
  • IE11のみハックで、游ゴシック体・游明朝体のフォントをやめメイリオなど別のフォントに変える

今回は後者の、フォントを変える方法を記載します。

@media all and (-ms-high-contrast:none) {
　p{
  　font-family: "メイリオ", Meiryo, sans-serif !important;
　}
}

まとめ

IE11はこの他にも、「メイリオ」以外だとline-height が効かなくなるバグなど相変わらず困ったブラウザです。IE11が生き残っている以上、しばらくはこのような対応をしてしのぎましょう！

※当記事の掲載内容は執筆現在の個人の見解・調査によるもので、動作・サービス等を保証するものではありません。最新情報は各公式サイトでご確認頂き、購入・契約・データ作成等はご自身の判断・責任でお願いします。 免責事項

関連記事

WEBデザイン動画講座
YouTubeで学ぶWEBデザイン Uチャンネル Powerd by STAND4U
超短期1日集中 オンラインWEBデザインマンツーマン講座

ナビゲーション

この記事を書いた人

編集長

WEBデザイン・グラフィックデザイン歴：約18年、HTMLコーディング、jquery、wordpress、イラストなど本業とし、WEBデザインコンサル・プログラミング・ライティング等にも勤しんでいます

プロフィールはこちら

WEBデザイン作品集はこちら

Twitter @stand_4u_ をフォロー

[ー]

新着記事