clearfix、下に出る余白をfont-sizeが影響！？：Mac Safari 2
Mac Safari 2でclearfixのレンダリング結果を画像付きで検証
俗に呼ばれているclearfixと呼ばれる良く出来た技、例えばボックス要素内に2つの要素が分かれていて、内部要素にfloatで左右に浮動させると、外にあるボックスは内部要素を包括できなくて、周囲をborderで囲んだり、背景色を入れたり、margin-bottomなどで下の余白を取ったりとかが出来ないところに有効とされているやり方なんですが、Mac Safari 2でちょっと難ありって感じでした。
下図は以下のソースコードのレンダリング結果です。
〜XHTMLソースコード〜
<dl class="clearfix">
〜CSS〜
<dt><img src="images/itemphoto.jpg" alt="写真" /></dt>
<dd><h2>商品紹介</h2>
<p>商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。商品の案内が入ります。</p>
</dd>
</dl>
・・・繰り返し
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
min-height: 1%;
}
* html .clearfix {height: 1%;}
div#itemsWrapper dl{
width:660px;
padding:0;
margin:0 0 15px;
}
div#itemsWrapper dl dt{
width:220px;
text-align:center;
float:left;
}
div#itemsWrapper dl dt img{
padding:1px;
border:1px solid #999999;
}
div#itemsWrapper dl dd{
width:440px;
float:right;
}
左がWIN IE6のレンダリング結果で、右がMac Safari2のレンダリング結果です。
結果としてはMac Safari2の下の余白がかなり大きいのが分かります。
そこで今回は他のブラウザと余白がどれくらい違うのか比較をしてみました。
ちなみに上記CSS指定の通り、dl要素の下の余白は15pxを指定しています。
意外にもWIN Safari3が一番正確なのがわかります。
しかし、同じSafariでもMac版は33pxと、何か1行くらい文字が入っているようにも思わせる余白です。
今までに挙げられていた解決策が.clearfix:after内にline-height:0;を追加することで、余白はかなり狭まった感じはしたけれど、まだ完全に他のブラウザと同じくらいには見えなかった、そのレンダリング結果が下図です。
10pxも縮まり、あとはどうするか、ここでfont-sizeを指定してみました。
:after疑似クラスが吐き出した"."が、通常のテキスト分"見えない1行"を作っているのでは？という疑いがあったからです。
font-sizeの場合、絶対的な大きさ（長さ）を指定するときpxを指定するケースがあるけれど、まず、マイナス値は指定出来ないとされているようで、それでは「0」はどうだ？と試した所、効果無し、font-size:0;はやっぱり認識されません。
ならば、「0.1em」ならどうでしょう？
結果は、さらに少し縮んだ、しかし、さほど変わりないです。
emの指定の場合、小数点が通常は有用なので、使えると思ったが、さほど効果がなかったので妥協案。
「1px」で指定。
これは本当に妥協で、これで効果があったとしても1pxは多く隙間が出来るはず...と思い実行してみます。
font-size:1px;
まさに思惑通りというか、フォントサイズの1px分だけ多いのも思惑通り。
フォントサイズを色々試してはみたが、これが一番近かったようでした。
