IE11で謎のテキスト余白? 原因は游ゴシック体・游明朝体とIE11の相性だった！
2017年4月28日 IE11でテキストに起こる謎の余白の原因は？ WEBサイトのhtmlをコーディングする際、IE11だけテキストに謎の余白に遭遇する事がある。本文などのテキストでは気づきにくいが、見出しなどデザイン上、罫線や背景色などでテキストを囲った状態の場合、テキストの上下の余白がIE11だけ違う事に気づく時がある。いつも起こっているわけじゃなかったので、原因がどこにあるのかわかるのに少し時間がかかりました。 調べた結果、フォントの指定を「游ゴシック体・游明朝体」にしている時に、IE11で謎の余白が空いてしまう事がわかったので、その現象の詳細と対策法を書きたいと思います。 游ゴシック体・游明朝体はWindowsとMac両方にインストールされている貴重なフォント 游ゴシック体・游明朝体は、MacではOSX Mavericksから、WindowsではWindows8.1から標準でインス
游を font-family で指定した時に IE で生じる謎余白対策 | Thought is free
IE で游ゴシック・游明朝を指定した時に IE で生じる謎の余白 いまだに、IE 11 のシェアが多いので、 この手のバグへの対策は、メンドー臭い。 IE の場合、「メイリオ」以外だと、line-height が効かなくなるバグもある。 単純な話、IE では、font-family の先頭で「メイリオ」フォントを指定しないとダメですね。 （同じ Microsoft でも Edge なら、メイリオ以外でも問題ない） 参考サイト 最近は、Windows と Mac で同じフォントにするため、「游ゴシック」を指定してるサイトもあるが、その場合は、IE だけメイリオにする CSS ハックした方がいいと思う。 例えば、font-family を ↓ このように指定してるなら、 body { font-family: "游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
