游ゴシックを使用時、IEでテキスト下部に余白ができる

フォントに游ゴシックを指定した際、IEでテキスト下部に微妙に余白ができてしまうようだったので、対応した方法をメモ。

サンプルコード

ボタンやアイコンなど、テキストを背景に対して上下中央位置に配置するときに分かりやすくずれていました。

HTML

<span class="icon">アイコン</span>
<a href="" class="btn">ボタン</a>

CSS

body {
	font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic;
}
.icon {
	display: inline-block;
	width: 70px;
	color: #ffffff;
	font-size: 12px;
	text-align: center;
	background: #ff7a7e;
}

.btn {
	/* reset */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
	outline: none;
	text-decoration: none;
	background: transparent;

	display: inline-block;
	width: 300px;
	padding: 15px 0;
	color: #ffffff;
	font-size: 18px;
	text-align: center;
	background: #3bb39f;
}

IEでずれるデモページ
IEだとテキストが少し上寄りになっていました。

IE10以降用のハックを使ってpaddingを設定して対応しました。

CSS

body {
	font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic;
}
.icon {
	display: inline-block;
	width: 70px;
	color: #ffffff;
	font-size: 12px;
	text-align: center;
	background: #ff7a7e;
}
@media all and (-ms-high-contrast: none) {
	.icon {
		padding-top: 3px;
	}
}

.btn {
	/* reset */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
	outline: none;
	text-decoration: none;
	background: transparent;

	display: inline-block;
	width: 300px;
	padding: 15px 0;
	color: #ffffff;
	font-size: 18px;
	text-align: center;
	background: #3bb39f;
}
@media all and (-ms-high-contrast: none) {
	.btn {
		padding-top: 18px;
		padding-bottom: 12px;
	}
}

対応後のデモページ
chromeと比べて3px程ずれているようだったので、3pxずらす形で対応しました。