超現場ブログ

Technique,Design and Events

line-heightがIEで効かない時の回避法[web塾 関東]

Twitter Facebook Google+ はてブ

line-heightがIEで効かない時の回避法[web塾-関東]

関東代表 田中です。

大宮校のある受講生くんが、
「line-heightがIEで効かない!」
罠に受講生がはまっていましたのでちょっと対処法をご報告します。

h3 {
background-color: #006699;
padding-left: 20px;
line-height: 40px;
height: 40px;
margin-bottom: 10px;
color: #fff;
}
p {
line-height: 1.7;
margin-bottom: 20px;
font-size: 16px;
}

この様に、h3はheightとline-height同じ高さにして上下のセンターに揃え、
pのline-heightは1.7で指定。

IEのエミュレーターで8以降のバージョンにしたらline-heightの指定が効かない事態に。

キャプチャ2

$モダンブラウザ.(‘死語’);においては、下記の様に表示されています。

キャプチャ

JavaScript等で回避する方法がありますが、簡単なところで
font-familyの冒頭にメイリオを指定する事で回避されました。

大宮校受講生くんのfont-familyの指定はこうなっていました。

font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;

IEにはfont-family最初にメイリオを冒頭に書かないとline-heightが効かないというバグがあるようです。

以下の様にfont-familyの指定を修正した事で回避されました。

font-family: "メイリオ", "MS Pゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;

色々調べてみると、同じライン上にimgが並んでいる場合に起こるとの事。
大宮校受講生くんの場合は、
h3の頭にはアイコン等のimgタグはなく、
pタグ内にもimgタグは無いのでどんなアルゴリズムが働いているのか謎です。

自分の経験では、一度もこのような事が無かったのですが、
以後、font-familyの指定はメイリオを頭に書く事にしました。

実は、遊ゴシックよりもメイリオが好きなので
メイン作業機のMac book Air にはメイリオを入れているくらいです。

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.