游ゴシックを使用時、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ずらす形で対応しました。

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31