Css 为什么是'；绝对值'；表单元格中定位的DIV元素未显示（仅在Google Chrome中）_Css_Google Chrome_Html

Css 为什么是'；绝对值'；表单元格中定位的DIV元素未显示（仅在Google Chrome中）

css google-chrome html

Css 为什么是'；绝对值'；表单元格中定位的DIV元素未显示（仅在Google Chrome中）,css,google-chrome,html,Css,Google Chrome,Html,为了演示这个问题，下面的HTML文件显示了一个非常高的DIV（名为div1），它是初始隐藏的，以及一个显示或隐藏div1的按钮。在Google Chrome中打开它，然后单击按钮以显示div。您会注意到div现在已显示，但无法看到它的下部，因为它太高，无法放入窗口，Chrome没有显示滚动条如果你在Firefox中打开它，就不会有这样的问题。当显示div1时，Firefox会显示一个滚动条，以便您可以滚动查看其下部 <html> <head> <script

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

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

<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>

我发现这与table元素和第一个div有关。如果我删除table/tr/td标记或将第一个div的样式从“position:relative”更改为“position:absolute”，Google Chrome将正确显示滚动条。不幸的是，在我的项目中，我不能这样做，因为这会影响页面中的许多元素

它看起来像是Chrome中的一个bug？是否有其他解决方法/修复方法？

在Safari中也会出现这种情况

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

      <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故意选择了这种行为，要么就是一个bug。无论如何，看起来您需要更改标记/CSS才能修复它。要么是我上面建议的解决方案，要么像您最初尝试的那样删除表/tr/td。不幸的是，对您来说，这听起来似乎需要进行重大的重构，因为这些更改将产生连锁反应。祝你好运