滚动条与 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

一定要检查 IE 的 Flex 错误列表；特别是因为您使用的是 box-sizing: border-box，一个已知在 IE 中存在兼容性问题的属性：https://github.com/philipwalton/flexbugs#flexbug-7

Answer 2

您使用的是 windows 8+ 吗？可以post问题截图吗？

（我使用的是 IE11 和 Windows 7，看起来不错）

Windows8+ 上的 IE10+ 存在滚动条覆盖内容的问题（或设计特征，取决于您的看法）。尝试以下方法，如果它能解决您的问题，请告诉我。

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

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

Answer 3

我不喜欢这个解决方案，但我根据 itodd 响应为 IE 和 Edge 添加了媒体查询。

IE 11：（Edge Hack 不起作用）

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
  .document { padding-bottom: 17px; } 
}

边缘：

@supports (-ms-ime-align: auto) { 
  .document { padding-bottom: 12px; } 
}

滚动条与 IE/Edge 上的内容重叠

Scrollbar overlaps content on IE/Edge

css

internet-explorer

cross-browser