游ゴシックがIEで上にずれる時のCSSでの対応方法

2019年1月21日2019年3月24日

游ゴシックって綺麗ですよね。このブログでも使用しています。ですが、游明朝も含む、游なんちゃら系のフォントをインターネットエクスプローラーで使用すると、上にずれてしまってカッコ悪い。。。

さすがIEですね。やってくれます。もうすぐ対応しなくてよくなると思うと気が楽ですが、最終バージョンのIE11などはまだまだシェアが高く無視できない状況です(執筆時においては)。そこで今回は、CSSのフォント指定で游ゴシックを使用した時にIEだけ上にずれてしまう時の対処方法を書いてみたいと思います。

主な対応方法は2つ

CSSだけで対応するとすると、考えられる方法は2つ。

  1. IEだけフォントを変える
  2. IEだけ高さを調整する

高さがずれて気になるのは、主に見出しなどの背景色やボーダーを付けた部分だと思います。大した手間でなければ、2の方法で1カ所ずつ高さを調整してやるとよいでしょう。また、修正箇所が多かったりして「そんなの無理!」とか「面倒くさい!」という場合は、IEだけフォントを変えてしまえばよいでしょう。

どちらの方法も、IEだけにCSSを適用させればいいわけですよね。ま、当たり前っちゃ当たり前ですが、これをどうやるのよ?って話ですよね。私も毎回忘れて調べてしまいます。

IEだけにCSS指定する記述法

CSSハックってやつですが、下のように書くとIEだけにCSSを適用させられます。IEのバージョンごとに指定したりもできますが、今回は游ゴシックのズレ対策なので、IE8~11まで対応の書き方です。

STARTの行とENDの行の間に、IE向けのCSSを記述しましょう。

これでフォントを替えるなり、高さズレの気になる箇所の padding-topを増やしてやるなりすれば、游ゴシックがIEでも綺麗になります。

最後に

この記事を書いている途中で気づいたのですが、このブログはこの記事でご紹介したような対応をしていませんでした。。。きっとIEで見たら、緑色の見出し部分はズレてカッコ悪くなっていた事でしょう。。。

ついつい仕事じゃないと手を抜いてしまいますね。この記事がみなさんに読まれる頃までには、修正してIEでも綺麗にしておこうと思います。

関連のある記事

CSSでobject-fitを使わずに特定の縦横比に画像をトリミングする方法

CSSでobject-fitを使わずに特定の縦横比に画像をトリミングする方法

記事を読む

埋め込みグーグルマップの縦横比を固定してレスポンシブ対応にする方法

埋め込みグーグルマップの縦横比を固定してレスポンシブ対応にする方法

記事を読む

CSSでセンタリングした複数行テキストの改行位置を揃えて綺麗に見せる方法

CSSでセンタリングした複数行テキストの改行位置を揃えて綺麗に見せる方法

記事を読む

スマホで画像が一瞬だけ大きく表示されてしまう場合のCSS修正方法

スマホで画像が一瞬だけ大きく表示されてしまう場合のCSS修正方法

記事を読む


目次へ
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages