floatで浮かせた要素がなんかどっかでつっかえるのを直したい・パターン1(FireFox)


floatで浮かせた要素がなんかどっかでつっかえる。

IE6とかに多いけど、FireFoxで起こることもある。

今回はFireFoxで起こったケース。

どうやらフォントサイズが関係しているらしいが、わからない。

cssだけで解決できればそれにこしたことは無いけど、どうしてもわからない、無理!ってときはJSに頼るしかない。

JSに頼るしかないときってのは強引に直さなきゃならない時ってたいてい相場が決まってる。

今回はfloatさせてるボックス要素の三つおきにクラスclearを追加して強引に整形した。


<div class="floatedBox"></div>
<div class="floatedBox"></div>
<div class="floatedBox"></div>
<div class="floatedBox"></div>
<div class="floatedBox"></div>
<div class="floatedBox"></div>
....

div.floatedBox{float:left;width:70px;height:100px;}

//onloadでaddClassClear()関数を実行するイベントリスナを追加
if (window.addEventListener) { /* Firefox */
window.addEventListener("load", addClassClear, false);
}
else if (window.attachEvent) { /* IE */
window.attachEvent("onload", addClassClear);
}
else {
window.onload = addClassClear;
}
/*--3つ置きにflaotを解除するclass"clear"を挿入--*/
function addClassClear() {
var elem = document.getElementsByTagName('div');
for (var i=0; i<elem.length; i++){
var j = i%3;
var className = elem[i].className;
if(className == 'floatedBox' && j=='1'){
elem[i].className = 'floatedBox clear';
}
}
}