Win8.1・Win10のIE11で、游書体(游明朝・游ゴシック)の余白がおかしい！どうする？

HTML・CSS

案件で起きたことの覚書です。

案件でのテキスト周りのルールは、

テキストは明朝体で表示する
テキストはシステムフォントで表示する（＝Webフォントは使わなくてよい）
ボタン等は指示がない限りテキストで表示する

だったので、font-familyを以下のように指定していました。

font-family: Century, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;

システムフォントで表示するので、Windows8.1、Windows10、Macでは、游明朝が表示されることになります。
流し込みのテキストだとまったく気になりませんが、CSSで作ったボタン等で、テキスト周りがボーダーで囲まれていると、Windows8.1とWindows10のIE11では、テキスト位置が微妙にずれていました。

どんな感じに見えるのか、ブラウザごとの違いがわかりやすいよう、以下の記述のファイルを各ブラウザで表示したもののキャプチャを取ってみました。

検証コード

■CSS

html {
    box-sizing: border-box;
    vertical-align: baseline;
    padding: 20px;
}
html,
body {
    height: 100%;
    width: 100%;
}
*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    vertical-align: inherit;
}
.yu-mincho {
    font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
}
.yu-gothic {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}
.meiryo {
    font-family: "メイリオ", Meiryo, sans-serif;
}
p {
    float: left;
    width: 300px;
    line-height: 1;
    margin: 10px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #999999;
}
div:after {
    content: " ";
    display: block;
    clear: both;
}

■html

  <div>
    <p class="yu-mincho">このフォントは游明朝です</p>
    <p class="yu-gothic">このフォントは游ゴシックです</p>
    <p class="meiryo">このフォントはメイリオです</p>
  </div>

各ブラウザでの表示のキャプチャ

下記画像をクリックすると、原寸大の画面キャプチャが表示されます。

■win8.1 IE11

■Win10 IE11

■Win10 Edge

■Mac(OS X El Capitan) Safari

同じページを表示しているにもかかわらず、IE11のみ、游明朝と游ゴシックがちょっと上にずれるというか、テキストの下に余分な余白ができてしまいます。
画像に引いた赤のラインがベースラインですが、どうやら2px程度のずれが生じるようです。

考えられる対応策

CSSで作成するボタン部分のみ、游明朝を表示しないようにする
IE11のみ、游明朝を表示しないようにする
游明朝を表示させた状態で、IE11のみ、上下の余白を調整する
ボタン部分を画像にしてしまう

今回は、「2.IE11のみ、游明朝を表示しないようにする」で対応しました。
せっかく表示できるようになった游明朝を表示しないようにするというのは、本末転倒な気もしますが、「1.CSSで作成するボタン部分のみ、游明朝を表示しないようにする」や「3.游明朝を表示させた状態で、IE11のみ、上下の余白を調整する」よりは、一括で対応できるので簡潔ではないかと思います。
「4.ボタン部分を画像にしてしまう」は、今回の「ボタン等は指示がない限りテキストで表示する」というテキスト周りのルールに沿わないので却下しました。

IE11のみ、游明朝を表示しないようにする方法

CSSハックを使います。この期に及んで、という気もしますが……。
IE9までは、条件付きコメント（コンディショナルコメント）を使ってブラウザごとの表示を振り分ける、という方法がよく使われていましたが、IE10以降は条件付きコメントが使えなくなっています。
ですが、メディアクエリを使ってIE10以降に適用するCSSハックを記述することができます。

■IE11に適用する

@media all and (-ms-high-contrast:none){
    *::-ms-backdrop, body {font-family: Century, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;}
}

■IE10以降に適用する
（「*::-ms-backdrop,」をつけなかった場合は、「IE10以降」に適用されます）

@media all and (-ms-high-contrast:none){
    body {font-family: Century, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;}
}

同じ方法で、「1.CSSで作成するボタン部分のみ、游明朝を表示しないようにする」や「3.游明朝を表示させた状態で、IE11のみ、上下の余白を調整する」も実装は可能です。

IE11のサポートは、Win8.1では2023年1月まで、Win10では2025年10月までとなっていますので、まだまだ対応が必要なようです。IEは最後の最後までいろいろ悩ませてくれますね……。
2016年9月時点ではIE11が「最後のIE」とされていますので、Win10版IE11のサポートが終了する2025年には「CSSハックを使って～」という手法はなくなるはずです。それまでは、CSSハックを使って対応していきましょう。