游ゴシックがIEで上にずれる時のCSSでの対応方法
游ゴシックって綺麗ですよね。このブログでも使用しています。 ですが、游明朝も含む、游なんちゃら系のフォントをインターネットエクスプローラーで使用すると、上にずれてしまってカッコ悪い。。。
さすがIEですね。やってくれます。もうすぐ対応しなくてよくなると思うと気が楽ですが、最終バージョンのIE11などはまだまだシェアが高く無視できない状況です（執筆時においては）。そこで今回は、CSSのフォント指定で游ゴシックを使用した時にIEだけ上にずれてしまう時の対処方法を書いてみたいと思います。
～ 目次 ～
主な対応方法は2つ
CSSだけで対応するとすると、考えられる方法は2つ。
- IEだけフォントを変える
- IEだけ高さを調整する
高さがずれて気になるのは、主に見出しなどの背景色やボーダーを付けた部分だと思います。大した手間でなければ、2の方法で1カ所ずつ高さを調整してやるとよいでしょう。また、修正箇所が多かったりして「そんなの無理！」とか「面倒くさい！」という場合は、IEだけフォントを変えてしまえばよいでしょう。
どちらの方法も、IEだけにCSSを適用させればいいわけですよね。ま、当たり前っちゃ当たり前ですが、これをどうやるのよ？って話ですよね。私も毎回忘れて調べてしまいます。
IEだけにCSS指定する記述法
CSSハックってやつですが、下のように書くとIEだけにCSSを適用させられます。IEのバージョンごとに指定したりもできますが、今回は游ゴシックのズレ対策なので、IE8～11まで対応の書き方です。
|
1 2 3 4 5 6 7 8 |
@media screen and (min-width: 0\0) and (min-resolution: +72dpi) { .selector { property: value; } /* IE向けのCSS～START */ /* IE向けのCSS～END */ } |
STARTの行とENDの行の間に、IE向けのCSSを記述しましょう。
これでフォントを替えるなり、高さズレの気になる箇所の padding-topを増やしてやるなりすれば、游ゴシックがIEでも綺麗になります。
最後に
この記事を書いている途中で気づいたのですが、このブログはこの記事でご紹介したような対応をしていませんでした。。。きっとIEで見たら、緑色の見出し部分はズレてカッコ悪くなっていた事でしょう。。。
ついつい仕事じゃないと手を抜いてしまいますね。この記事がみなさんに読まれる頃までには、修正してIEでも綺麗にしておこうと思います。
