c/fe

http://d.hatena.ne.jp/uzulla から移行しました。

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とかひどいので泣ける。