Webデザイン 2017-9-18

Internet Explorer で line-height が効かない

※この記事は2013年10月のエントリーを再編集・再掲載しています。

結論：font-familyの指定を確認する

HTML

<div class="line-height">ABCDEFG</div>

line-height が効かない CSS

body {
  font-family: "ヒラギノ角ゴ Pro W3", "小塚ゴシック Pro R", "メイリオ", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "KozGoPro-Regular", "Meiryo", "MS PGothic", "MS UI Gothic", Osaka, sans-serif;
}
.line-height {
  background-color: #ffffe6;
  color: #ef0001;
  height: 30px;
  line-height: 30px;
  margin-top: 50px;
  overflow: hidden;
  text-align: center;
}

line-height が効くCSS

body {
  font-family: "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
}
.line-height {
  background-color: #ffffe6;
  color: #ef0001;
  height: 30px;
  line-height: 30px;
  margin-top: 50px;
  overflow: hidden;
  text-align: center;
}

font-family指定で一番初めに”メイリオ”を指定していない場合、line-heightが効かないことがあるようです。font-familyの指定を見てみましょう。

model 河村友歌 photo by すしぱく at pakutaso