css - 滚动条在 IE/Edge 上与内容重叠

Question

我希望在根容器上有一个水平滚动条并且没有垂直滚动条，在子容器上有一个垂直滚动条并且没有水平滚动条。 需要的兼容性:IE、Edge、Chrome、FF。 (最新版本)

<rootcontainer> => horizontal scroll
 <subcontainer1> => vertical scroll
  <data></data>
 </subcontainer1>
 <subcontainer2> => vertical scroll
   <data></data>
 </subcontainer2>
</rootcontainer>

在Chrome和FF上滚动没有问题，但是在IE11和Edge上，根容器的滚动会和子容器的内容重叠。

注意:每个子容器的宽度必须等于子容器的 50%。

Here is my problem in a fiddle.

我错过了什么让它发挥作用？

编辑:

Windows 10 边缘

Windows 10 浏览器

请注意，在 IE11 上，边框不可见。 该错误在 Edge 上更明显

Answer 1

您使用的是 Windows 8+ 吗？可以发布问题的屏幕截图吗？

(我使用的是 IE11 和 Windows 7，看起来不错)

Windows 8+ 上的 IE10+ 存在滚动条覆盖内容的问题(或设计功能，取决于您如何看待它)。请尝试以下操作，如果它能解决您的问题，请告诉我。

.document,
.meta,
.viewer,
.other-doc {
    -ms-overflow-style: scrollbar;
}

查看 https://msdn.microsoft.com/en-us/library/mt712067(v=vs.85).aspx