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時間。備忘録も兼ねて、誰かの参考になれば。