IE7-浏览器设置子容器innerHTML会导致父容器offsetTop更改
今天碰到一个问题,IE7-浏览器下(或者Quirks模式下),如果设置设置子容器的innerHTML,当设置的内容为table并且包含了align="center",会导致父容器的offsetTop增加,从而使父容器向下移动。
测试代码如下,子容器table没有align="center"属性,设置子容器不会修改父容器的offsetTop属性
<div id="bb" style="border:1px solid gray;overflow:hidden;height:120px;width:230px"> <div id="bb1"> <table border="0" cellpadding="0" cellspacing="0"> <script> for (var i = 0; i < 20; i++) document.write('<tr><td>' + i + '</td></tr>'); </script></table> </div> <div id="bb2"> </div> </div> <SCRIPT> var bb2 = document.getElementById('bb2'), bb1 = document.getElementById('bb1'); bb2.innerHTML = bb1.innerHTML; </SCRIPT>
给table增加align="center"属性,父容器的offsetTop被莫名其妙修改了,从15变为85导致父容器向下移动了
<div id="bb" style="border:1px solid gray;overflow:hidden;height:120px;width:230px"> <div id="bb1"> <table border="0" cellpadding="0" cellspacing="0" align="center"> <script> for (var i = 0; i < 20; i++) document.write('<tr><td>' + i + '</td></tr>'); </script></table> </div> <div id="bb2"> </div> </div> <SCRIPT> var bb2 = document.getElementById('bb2'), bb1 = document.getElementById('bb1'); bb2.innerHTML = bb1.innerHTML; </SCRIPT>
蛋痛的IE7-浏览器,bug真多。。
加支付宝好友偷能量挖...
原创文章,转载请注明出处:IE7-浏览器设置子容器innerHTML会导致父容器offsetTop更改