HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

いつもどおりコーディングしているつもりが、どういうわけか、今回だけ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;
}
このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search