滚动条在IE/Edge浏览器上会遮挡内容

Question

滚动条在IE/Edge浏览器上会遮挡内容

10

我希望在根容器上有一个横向滚动条，而没有垂直滚动条，在子容器上有一个垂直滚动条，但没有横向滚动条。必须兼容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

Windows 10 IE

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

- Zysce

请问您能否清楚地说明您的确切问题是什么？ - Xavier Issac

在IE和Edge上，根容器的水平滚动条会重叠在子容器的内容上。在Chrome和FF上测试fiddle，滚动没有问题。在IE和Edge上，滚动条会重叠。请检查边框。 - Zysce

你的意思是左边的边框粘着文本吗？因为我觉得一些内容并没有隐藏，可以通过滚动显示。 - user10089632

在Edge浏览器中，底部被截断，在IE浏览器中，border-bottom不可见。请查看图片。 - Zysce

3个回答

1

我不喜欢这个解决方案，但我根据itodd的回复添加了针对IE和Edge的媒体查询。

IE 11: 如何在样式表中仅针对IE（任何版本）进行定位？（Edge Hack不起作用）

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

Edge：如何使用CSS针对Microsoft Edge进行定位？

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

- Zysce

1

请务必检查IE存在的Flex错误列表，特别是当您使用box-sizing: border-box属性时，该属性已知在IE中存在兼容性问题：https://github.com/philipwalton/flexbugs#flexbug-7

- murb

我尝试添加flex-basis: auto和/或一个没有边框且具有box-sizing的包装器。但是它不起作用。 - Zysce

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- itodd · Accepted Answer

你是否使用的是Windows 8或更高版本？可以发布一下问题的屏幕截图吗？

（我使用的是IE11和Windows 7，显示正常）

在Windows 8或更高版本中，使用IE10及以上版本可能会出现问题（或设计功能，这取决于您的看法），其中滚动条覆盖了内容。请尝试以下方法，看看是否解决了您的问题。

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

查看 https://msdn.microsoft.com/zh-cn/library/mt712067(v=vs.85).aspx。