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

2018-06-14 08:43:44

我想有一个水平滚动条和没有垂直滚动的根容器和垂直滚动条上的子容器和没有水平滚动条。需要兼容性：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％。

这是我的小提琴问题。

我错过了什么让它工作？

编辑：

Windows 10 Edge Win10 Edge

Windows 10 IE w ^

请注意，在IE11上，边框不可见。这个bug在Edge上更加明显

你使用的是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

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

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

IE 11：如何在样式表中只定位IE（任何版本）？（Edge Hack不起作用）

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

边缘：如何使用CSS定位Microsoft Edge？

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

链接地址: http://www.djcxy.com/p/40873.html

上一篇: Scrollbar overlaps content on IE/Edge

下一篇: javascript