javascript - 无序列表中的列表项仅在 Internet Explorer 中重叠，在所有其他浏览器中一切正常

Question

我创建了以下列表项，它在 chrome 和我尝试过的所有其他浏览器中都运行良好。但是，它在 IE 中不起作用。

我使用 vue 框架创建了这个应用程序，并且在 Internet Explorer 中遇到了多个问题，这些问题已经得到解决，但我找不到任何其他人遇到过与此类似的问题。出于某种原因，一旦选择了列表中的元素，列表就会正常工作，但在页面的初始加载时，列表如上图所示。此外，在选择列表中的元素之前，列表无法在 IE 中滚动。

这是 CSS 列表。

ul{
    background-color: white;
    padding-top:10px !important;
    padding-bottom: 10px !important;
    height: 100%;
    max-height: 450px;
    overflow: auto;
}

用于滚动条的代码在其他浏览器中也能正常工作。

.col-4, .col-8{
    padding:0;
    overflow: hidden;
    overflow-y: -moz-hidden-unscrollable;
}

html{
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

@-moz-document url-prefix() {
    .list-group{
        margin-right: -16px;
    }
}

::-webkit-scrollbar {
    display: none;
}

任何帮助将不胜感激。

Answer 1

只有 IE 仍然遵守 html 元素的溢出规则。尝试改变

html{
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
to 
body{
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

要确定 IE11 在您的开发环境中使用的仿真模式，请使用 f12 开发工具的“仿真”选项卡。如果您要将旧应用程序升级到较新的框架，请从 html 标记中删除所有表示属性(对齐、滚动、背景等)。