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">&nbsp;</div>
</div>
<SCRIPT>
    var bb2 = document.getElementById('bb2'), bb1 = document.getElementById('bb1');
    bb2.innerHTML = bb1.innerHTML;
</SCRIPT>

IE7-浏览器设置子容器innerHTML会导致父容器offsetTop更改


  给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">&nbsp;</div>
</div>
<SCRIPT>
    var bb2 = document.getElementById('bb2'), bb1 = document.getElementById('bb1');
    bb2.innerHTML = bb1.innerHTML;
</SCRIPT>

IE7-浏览器设置子容器innerHTML会导致父容器offsetTop更改


  蛋痛的IE7-浏览器,bug真多。。

加支付宝好友偷能量挖...


原创文章,转载请注明出处:IE7-浏览器设置子容器innerHTML会导致父容器offsetTop更改

评论(0)Web开发网
阅读(279)喜欢(0)HTML/CSS兼容/XML