いつもどおりコーディングしているつもりが、どういうわけか、今回だけFirefoxでフッタの下に10pxほどの空白が空いてしまいます。
原因を解明するために、いろいろとCSSを調整してみたのですが、改善しません。
そうしているうちに、たまたま以下のような記事にたどり着きました。
Firefoxでフッター(footer)の下に隙間ができる – @blog.justoneplanet.info
結果から言うと「これで完璧」と信じ、使い続けてきたfloatによる回り込み解除のCSSに欠陥があったわけです。
問題の箇所は下記のブロックです。
.clearfix:after{ content:"."; display:block; height:0px; clear:both; visibility:hidden; }
参考サイトによると「font-size: 0.1em;」が必要との事です。
つまり、構造上、回り込み解除した後に、Firefoxだけfont-sizeが1px分の余白が開いてしまったということなんですね。実際のところは不明ですが、スペースを消すために0pxとするとSEO的に問題があるようなので、0.1emとするようです。
というわけで、以下に「これで完璧」だと思われる回り込み解除のスタイルを記述しておきます。
他に穴がある場合はご指摘いただければ幸いです。
.clearfix:after{ content:"."; display:block; height:0px; clear:both; visibility:hidden; font-size: 0.1em; } /* WinIE7 MacIE5 */ .clearfix{ display:inline-table; zoom:100%; } /* WinIE5-6 */ /* Hides from IE-mac */ * html html .clearfix{ height:1px; } .clearfixfix{ display:block; }
コメントする