为什么不显示表格单元格中“绝对”定位的 DIV 元素的一部分（仅在 Google Chrome 中）答案

【问题标题】：Why part of an 'absolute' positioned DIV element in a table cell is not shown (in Google Chrome only)为什么不显示表格单元格中“绝对”定位的 DIV 元素的一部分（仅在 Google Chrome 中）
【发布时间】：2011-10-11 22:39:42
【问题描述】：

为了演示这个问题，下面的 HTML 文件显示了一个非常高的 DIV（名为 div1），它最初是隐藏的，以及一个显示或隐藏 div1 的按钮。在谷歌浏览器中打开它，然后单击按钮以显示 div。您会注意到现在显示了 div，但无法看到它的下部，因为它太高而无法放入窗口并且 Chrome 不显示滚动条。

如果你在 Firefox 中打开它，就没有这个问题。 Firefox 在显示 div1 时会显示一个滚动条，以便您可以滚动查看它的下部。

<html>
<head>
  <script src="http://api.prototypejs.org/javascripts/pdoc/prototype.js" type="text/javascript"></script>
</head>
<body>
  <input type="button" onclick="$('div1').toggle();" value='Toggle'></input>
  <table>
    <tr>
      <td>
        <div style="position:relative">   
          <div style="position:absolute">   
            <div id='div1' style="position:absolute; height:1500px; width: 200px; border: 1px solid gray; display:none"></div>
          </div>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

我发现这与表格元素和第一个 div 有关。如果我删除 table/tr/td 标签或将第一个 div 的样式从“位置：相对”更改为“位置：绝对”，谷歌浏览器将正确显示滚动条。不幸的是，在我的项目中，我不能这样做，因为它会影响页面中的很多元素。

这看起来像是 Chrome 中的错误？还有其他解决方法/修复方法吗？

【问题讨论】：

我不知道为什么会这样，但是如果你把它从表中删除就不会发生。如果有某种方法可以消除表格，那应该没问题。
谢谢詹姆斯。不幸的是，表格是应用程序布局的一部分，删除它会影响太多页面。

标签： css google-chrome html

【解决方案1】：

这也发生在 Safari 中。

将包裹 #div1 的 div 的位置从绝对更改为相对将解决此问题：

      <div style="position:relative">   
        <div id='div1' style="position:absolute; height:1500px; width: 200px; border: 1px solid gray; display:none"></div>
      </div>

【讨论】：

谢谢。我也注意到了。但我不想改变它，因为它会影响 div 下其他元素的布局。
我认为那是一条死胡同。 Chrome / Safari 要么是故意选择这种行为，要么是一个错误。无论如何，看起来您需要更改标记/ CSS 才能修复它。无论是我上面建议的解决方案，还是按照您最初尝试的方式删除 table/tr/td。不幸的是，这听起来好像需要大量重构，因为这些更改会产生连锁反应。祝你好运！