Firefoxでサイトのフッターとブラウザになぞの隙間 clearfix問題

CSS

あるデザインテンプレートを利用したら、Firefoxでサイトのフッターとブラウザの間になぞの隙間ができていたのがずっと気になっていた。

IEでは再現しなかった。

目立たない部分なので解決を後回しにしていたのだが、やっとちゃんと調べてみたらこれが原因だった。

clearfixの決定版を作る −モダンブラウザ編−
http://norisfactory.com/stylesheetlab/000038.php

clearfixというCSSの手法が利用していたデザインテンプレートにも使われていたのだが、これが問題だった。

利用していたデザインテンプレートでは

.clearfix:after { 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
} 
.clearfix {display: inline-block;} 
/* Hides from IE-mac \*/ 

*1257897499* html .clearfix {height: 1%;} 
.clearfix {display: block;} 
/* End hide from IE-mac */

だったがこれだとclass="clearfix"としたdivの下にテキスト1行分の隙間が残ってしまっていた。
これがなぞの隙間の正体だったらしい。

Movable Typeに使われているclearfixを利用したら解決した。

.pkg:after { 
content: " ";  
display: block; 
visibility: hidden; 
clear: both; 
height: 0.1px; 
font-size: 0.1em; 
line-height: 0; 
} 

*1257897500* html .pkg { display: inline-block; } 
/* no ie mac \*/ 

*1257897501* html .pkg { height: 1%; } 
.pkg { display: block; } 
/* */

content: " ";
font-size: 0.1em;
line-height: 0;

がポイント。

clearfixの提唱者サイト
http://www.positioniseverything.net/

.clearfix:after {
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
.clearfix {
	min-height: 1px; /*IE6、7対策*/
}
* html .clearfix {
	height: 1px;
	/*\*//*/ /*MAC IE5.x対策*/
	height: auto;
	overflow: hidden;
	/**/
}