游を font-family で指定した時に IE で生じる謎余白対策

2016年9月22日

IE で游ゴシック・游明朝を指定した時に IE で生じる謎の余白

いまだに、IE 11 のシェアが多いので、
この手のバグへの対策は、メンドー臭い。

IE の場合、「メイリオ」以外だと、line-height が効かなくなるバグもある。

単純な話、IE では、font-family の先頭で「メイリオ」フォントを指定しないとダメですね。
（同じ Microsoft でも Edge なら、メイリオ以外でも問題ない）

参考サイト

最近は、Windows と Mac で同じフォントにするため、「游ゴシック」を指定してるサイトもあるが、その場合は、IE だけメイリオにする CSS ハックした方がいいと思う。

例えば、font-family を ↓ このように指定してるなら、

body {
	font-family: "游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

↓ このようにして、IE の時だけ「メイリオ」にする。

body {
	font-family: "游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
@media all and (-ms-high-contrast:none) {
	body {
		font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	}
}

とりあえず、これが一番簡単な対策ですかね。

どうしても、游ゴシックで表示しないとヤダって場合は、

↑ こちらの方のように、ズレてる箇所を一個一個ハックするくらいしかないかなー。