IEのMarginマイナス系の謎バグ
環境はIE8で、IE6~8すべてのモード。
<style> .div1{ width:500px; height:500px; float:left; } </style> <div style="width:200px;overflow:hidden"> <div style="width:3000px"> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div><div style="clear:both'></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div><div style="clear:both'></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div><div style="clear:both'></div> </div> </div>
このような、小さなのぞき窓DIVから大きなDivをのぞきこんで、中のDivをMarginでマイナス指定しつつのぞき穴の中を動かす、という事をやったらIEで意味不明なバグが発生して死んだ。
次の行を表示しようとmargin-topを-500pxしたら、いきなりすごいすっ飛ぶ(-1500pxしたくらい)。これが-499pxまでなら普通。
そして-999pxまではすっとんだ先から正常っぽくスライドするが、-1000pxにするとまたすっとぶ。
条件は
・上記のようにのぞき窓にする
・中の横幅が巨大であること
・縦幅も巨大であること?
・margin-topにマイナスを、中のDivの縦幅の整数倍?を指定する
まじでIEとかイミフ。
これはDivがマズイのかなーと、Tableで以下のように組み直してみた
<style> .div1{ width:500px; height:500px; float:left; } </style> <div style="width:200px;overflow:hidden"> <table> <tr> <td class="div1"></td> <td class="div1"></td> <td class="div1"></td> <td class="div1"></td> <td class="div1"></td> </tr> <tr> <td class="div1"></td> <td class="div1"></td> <td class="div1"></td> <td class="div1"></td> <td class="div1"></td> </tr> <tr> <td class="div1"></td> <td class="div1"></td> <td class="div1"></td> <td class="div1"></td> <td class="div1"></td> </tr> </div> </div>
これはすっとびがなくなった!やった!…とおもったがどうもオカシイ。
色々調べると、同じTrの中なのに、tdが次の行に落ちるという謎挙動。
おいおいなにそれ、Tableってtdが次の行に落ちるのってないだろ…。
まじIEとかひどいので泣ける。