游ゴシックはMacではOSX Mavericksから、Windows8.1から標準でインストールされている、待望の共通のフォントで、これからのWeb制作のフォント指定はメイリオじゃなくて游ゴシッックで決まりだ！とか思っていたのですが、やっぱりIEさんが足を引っ張ります。
游ゴシックでフォント指定するとIEで文字下に謎の余白ができる
游ゴシックでフォント指定するとIEで文字の下に謎の余白ができちゃいます。Chromeは問題なしです。
パンくずとかすごいことになってました。
対応策を考える
早速問題解決のためにググってみると、どうもIE固有のバグじゃないか？的な結論に達しました。で、僕のサイトのIEシェアは16%です。16%のために84%を犠牲にするのは、間抜けな手段なので、手っ取り早くIEのみfont-familyを変更します。全バージョン対象です。
IEの条件判定
SASSでIEハックを行うとエラーを出す場合があるので、最初はhtmlの条件付きコメントで、別CSSでbodyのfont-familyだけ指定しようかと思っていましたが、IE10以上で条件付きコメントが使えないので、別の手段を考えます。
WordPressなんだからPHPでいいじゃん
jsも考えましたがコードが長くなりそうなので、PHPで実装しました。以下を通常のCSSの読み込みの下に記述します。
<?php $ua = $_SERVER['HTTP_USER_AGENT']; if (strstr($ua, 'Trident') || strstr($ua, 'MSIE')): ?> <link rel="stylesheet" href="<?php echo home_url(); ?>/css/ie-fonts.css"> <?php endif; ?>
これでIEのオリエンタルな表示崩れも解決です。
ついでに色々なサイトのIEのシェアを調べてみた
ついでなので、僕が権限をもっていて比較的アクセス数の多いサイトでIEのシェアを調べてみました。
- レスポンシブで10〜20％
- PCのみのBtoBで30〜40％
ひと昔前からは考えられない数値ですね！IEとのお付き合いはかなり長いですけど、そろそろちゃんとお別れしたいです。
