利用定位解决一个HTML页面奇怪的布局兼容性问题

前两天碰到个问题，一个页面中有个<div>，指定了固定的高宽尺寸值，同时通过overflow样式指定内容过多时自动出现滚动条。为了准确定位，此<div>被至于多个表格嵌套的单元格中。页面显示的时候出现了一些奇怪的bug：

测试使用过IE6、IE7、傲游等。根据在不同浏览器中的测试，此bug在有些浏览器中时隐时现，在有些浏览器中一直存在。

正常现象：

单元格尺寸正常，<div>尺寸、位置正常，根据其内容的多少会相应出现滚动条。

bug现象：

当<div>中内容进一步增多时，<div>自身尺寸未发生变化，但包含上述<div>的单元格<td>实际尺寸被无故撑大，单元格实际高度比指定值要大，页面布局被打乱。

 

经测试修改多处样式没有改善，加上DOCTYPE声明也不行，怀疑可能是IE浏览器的bug。

后来想到一个办法：

给<div>加上样式“position: absolute;”，让其使用绝对定位；同时给它的上级元素<td>加上样式“position: relative;”，以作为<div>的绝对定位参照物；各元素坐标及尺寸均不变。问题解决！

 

后来想到，这个问题怪异的很，而且在有的浏览器中不会出现问题，会不会是因为页面上表格嵌套太多的原因？或是有其它未发现的代码笔误？由于其它原因，没必要推翻整个页面重做了，所以不管那么多了，此处仅讨论此问题的一种解决方案而已。