月: 2007年2月

クリアツール作って使おうか

これは、Mac IEで、 clearを設定した要素の子要素では同じ方向のfloatが効かない(5.x)というバグがあるためです。
直前のフロートをクリアしたいボックスの中(子要素)でもフロートさせたい時は当然ある訳でして。そんな時に、クリアするためのツールを作って、フロートをクリアしたいボックスの次に入れてます。
以前は、brでクリアツールを作ってましたが、最近では、divの中にhrだけあるクリアツール使ってます。
これ、g氏に教えてもらった。これはCSSを切った状態でも線で仕切られて自然な場合も多いためです。
このツールのCSS
/*
clear tool
*/
.clear{
clear:both;
height:0;
visibility:hidden;
}
hr {
display:none;
}

widthを記載したボックスには、左右のボーダーとパディングは避けよう

これには、色んな理由があります。
ひとつは、古いブラウザのボックスモデルの解釈が違うため。 次に、Win IEでの 左右ボーダーとパディングを設置した要素に後続する部分がずれる(5.5/6.0)とか。
CSS3になると、ボックスサイズの算出時にボーダーまでを含めるらしいので、最近ではあまりハックを使ってない。ボックスモデルを含めたハックは最終手段と考えています。