Scrollbar overlaps content on IE/Edge
I would like to have an horizontal scrollbar and no vertical scroll on a root container and vertical scrollbar on sub-containers and no horizontal scrollbar. Compatibility needed : IE, Edge, Chrome, FF. (Latest versions)
<rootcontainer> => horizontal scroll
<subcontainer1> => vertical scroll
<data></data>
</subcontainer1>
<subcontainer2> => vertical scroll
<data></data>
</subcontainer2>
</rootcontainer>
No problem with the scroll on Chrome and FF, but on IE11 and Edge, the scroll of the root container is overlapping with the content of the sub container.
Note: each subcontainer must have a width equals to 50% of the subcontainer.
Here is my problem in a fiddle.
What did I missed to make it work ?
EDIT :
Windows 10 Edge 
Windows 10 IE 
Please note that on IE11, the borders are not visibles. The bug is more visible on Edge
Are you using windows 8+? Can post a screenshot of the issue?
(I'm using IE11 and Windows 7 and it looks fine)
There is an issue (or design feature, depending on how you look at it) with IE10+ on Windows 8+ where the scrollbar overlays the content. Try the following and let me know if it fixes your problem.
.document,
.meta,
.viewer,
.other-doc {
-ms-overflow-style: scrollbar;
}
Check out https://msdn.microsoft.com/en-us/library/mt712067(v=vs.85).aspx
Be sure to check the list of Flex bugs that IE has; especially since you're using box-sizing: border-box , a property known to have compatibility issues in IE: https://github.com/philipwalton/flexbugs#flexbug-7
I don't like this solution but I added media queries for IE and Edge based on itodd response.
IE 11 : How to target only IE (any version) within a stylesheet? (Edge Hack does not work)
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.document { padding-bottom: 17px; }
}
Edge : How to target Microsoft Edge with CSS?
@supports (-ms-ime-align: auto) {
.document { padding-bottom: 12px; }
}
上一篇: 两个磁盘交叉区域的统一采样
下一篇: 滚动条与IE / Edge上的内容重叠