blog

2015.11.13(Tips)

Firefoxで下に隙間や空白ができる場合の対処法(clearfix対策以外)

firefox

Firefoxでfloat:leftで回り込みした要素の下に謎の隙間が。。。
最近はChromeとIE8〜くらいしか確認しないので、見落としてた。

ググってみるも、clearfixの指定とかimgにvertical-align:bottomとかの情報がなく、諦めかけた。

3時間ほど別の作業をして、気分転換したあと、再度挑戦!

で、あっさり解決〜

html

<ul class="clearfix">
  <li>メニュー1</li>
  <li>メニュー1</li>
  <li>メニュー1</li>
  <li>メニュー1</li>
  <li>メニュー1</li>
</ul>

css

li {
 margin: 15px 0;
 float: left;
}

このような場合、clearfixしか疑わなかったのが盲点でした。cssに下記を追加すればOKでした。

li {
 margin: 15px 0;
 float: left;
 line-height: normal;
}

bodyとか他の親要素にline-height:160%;とか設定してるのが原因でした。
ですので、隙間ができてしまった親要素などにline-height: normal;を指定すればOKです。
サイト全体を変えていいなら、bodyとか他の親要素にline-height:normal;でOKですね。

久しぶりにクロスブラウザで悩んだ3時間。備忘録も兼ねて、誰かの参考になれば。
- AD -