Question

由于这里很难包含整个代码，因此有一个问题的简要描述（以及之后的一些精心设计的片段）：这个DIV元素的显示设置为none，通过将display设置为block弹出（在某些onclick事件上） ---像菜单一样）。由于此DIV的内容比整个页面大，所以当DIV.style.display == block时，浏览器会在其窗口中添加垂直滚动条 - 这很好。好吧，我决定在这个DIV上设置max-height和overflow-y，但是你自己有一个漂亮的垂直滚动条（它按预期工作），浏览器---特别是IE11 ---仍然添加垂直滚动 - 如前一种情况一样，向窗口移动。您可以使用它来滚动整个页面，但没有明显的点（窗口底部没有内容可以滚动到）。

以下是代码中的（或多或少）外观。 CSS首先：

div.mydiv {
    display: none;
    position: absolute;
    border-width: 1px 0px 0px 0px;
    border-color: #BBBBBB black black black;
    border-style: solid solid solid solid;
    border-radius: 0px 0px 5px 5px;
    background-color: white;
    padding: 4px;
    line-height: 11px;
    font-size: 10px;
    font-weight: normal;
    color: #FFFFFF;
    opacity: 1;
    left: -6px;
    top: 12px;
    cursor: default;
    box-shadow: 1px 1px 3px #888888, -1px 1px 2px #EEEEEE;
    z-index: 1600;
}

现在HTML：

<div class="mydiv" style="overflow-y: scroll; max-height: 300px;">...</div>

在FireFox中它按预期工作，即如果此DIV的最大高度超过300px且浏览器不将垂直滚动条添加到窗口，则DIV将获得其垂直滚动条。在IE11中，DIV也会获得其滚动条，但也会显示浏览器的窗口（仅当DIV可见时，即div.style.display == block）。任何想法如何摆脱这种浏览器的行为？

更新：这里是fiddle来演示它 - 请注意显示列表时显示的结果框架中的垂直滚动条。

Answer 1

我和我们在IE中使用CSS的开发人员讨论过这个问题。这似乎是IE11中的一个错误，我们正在调查。

Answer 2

我通过移除显示来修复：对div.select-box＆gt;内联; div选择器。这是new fiddle。

div.select-box > div {
    position: relative;
}

Answer 3

您可以在div.select-box {}中使用内联块代替内联，这样您就可以获得相同的视觉效果而无需使用不必要的滚动

具有max-height和overflow-y的DIV会导致IE11启用窗口的垂直滚动条---为什么？

3 个答案: