Html 如何防止 IE10 中的滚动条覆盖内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17045132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I prevent the scrollbar overlaying content in IE10?
提问by Jimmyt1988
In IE10, the scrollbar is not always there... and when it appears it comes on as an overlay... It's a cool feature but I would like to turn it off for my specific website as it is a full screen application and my logos and menus are lost behind it.
在 IE10 中，滚动条并不总是存在......当它出现时它作为一个覆盖......这是一个很酷的功能，但我想为我的特定网站关闭它，因为它是一个全屏应用程序，我的标志和菜单在它后面丢失了。
IE10:
IE10：
CHROME:
铬合金：
Anyone know a way of always having the scrollbar fixed in position on IE10?
任何人都知道一种始终将滚动条固定在 IE10 上的方法吗？
overflow-y:scroll doesn't seem to work! it just puts it permanently over my website.
溢出-y：滚动似乎不起作用！它只是将它永久放在我的网站上。
It may be bootstrap causing the issue but which part I have no idea! see example here: http://twitter.github.io/bootstrap/
它可能是导致问题的引导程序，但我不知道哪一部分！请参阅此处的示例：http: //twitter.github.io/bootstrap/
采纳答案by xec
After googling a bit I stumbled across a discussion where a comment left by "Blue Ink" states:
在谷歌上搜索了一下之后，我偶然发现了一个讨论，其中“蓝墨水”留下的评论指出：
Inspecting the pages, I managed to reproduce it by using:
@-ms-viewport { width: device-width; }
which causes the scrollbars to become transparent. Makes sense, since the content now takes up the whole screen.
In this scenario, adding:
overflow-y: auto;
makes the scrollbars auto-hide
检查页面，我设法使用以下方法重现它：
@-ms-viewport { 宽度：设备宽度；}
这会导致滚动条变得透明。有道理，因为内容现在占据了整个屏幕。
在这种情况下，添加：
溢出-y：自动；
使滚动条自动隐藏
And in bootstraps responsive-utilities.less file, line 21you can find the following CSS code
在bootstraps respond-utilities.less 文件的第 21 行中，您可以找到以下 CSS 代码
// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport {
width: device-width;
}
This snippet is what's causing the behavior. I recommend reading the links listed in the commented code above. (They were added after I initially posted this answer.)
此代码段是导致该行为的原因。我建议阅读上面注释代码中列出的链接。（它们是在我最初发布此答案后添加的。）
回答by stefan.s
As xec mentioned in his answer, this behavior is caused by the @-ms-viewport setting.
正如 xec 在他的回答中提到的，这种行为是由 @-ms-viewport 设置引起的。
The good news is that you do not have to remove this setting to get the scrollbars back (in our case we rely on the @-ms-viewport setting for responsive web design).
好消息是，您不必删除此设置即可恢复滚动条（在我们的示例中，我们依赖 @-ms-viewport 设置进行响应式网页设计）。
You can use the -ms-overflow-style to define the overflow behavtheitroad, as mentioned in this article:
您可以使用 -ms-overflow-style 来定义溢出行为，如本文所述：
http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx
Set the style to scrollbar to get the scrollbars back:
将样式设置为滚动条以恢复滚动条：
body {
-ms-overflow-style: scrollbar;
}
scrollbar
Indicates the element displays a classic scrollbar-type control when its content overflows. Unlike -ms-autohiding-scrollbar, scrollbars on elements with the -ms-overflow-style property set to scrollbar always appear on the screen and do not fade out when the element is inactive. Scrollbars do not overlay content, and therefore take up extra layout space along the edges of the element where they appear.
滚动条
指示元素在其内容溢出时显示经典滚动条类型的控件。与 -ms-autohiding-scrollbar 不同，将 -ms-overflow-style 属性设置为 scrollbar 的元素上的滚动条始终显示在屏幕上，并且在元素处于非活动状态时不会淡出。滚动条不会覆盖内容，因此会沿着它们出现的元素的边缘占用额外的布局空间。
回答by gdibble
SOLUTION:Two steps - detect if IE10, then use CSS:
解决方案：两步 - 检测 IE10，然后使用 CSS：
do this on init:
在 init 上执行此操作：
if (/msie\s10\.0/gi.test(navigator.appVersion)) {
$('body').addClass('IE10');
} else if (/rv:11.0/gi.test(navigator.appVersion)) {
$('body').addClass('IE11');
}
// --OR--
$('body').addClass(
/msie\s10\.0/gi.test(navigator.appVersion) ? 'IE10' :
/rv:11.0/gi.test(navigator.appVersion) ? 'IE11' :
'' // Neither
);
// --OR (vanilla JS [best])--
document.body.className +=
/msie\s10\.0/gi.test(navigator.appVersion) ? ' IE10' :
/rv:11.0/gi.test(navigator.appVersion) ? ' IE11' :
''; // Neither
Add this CSS:
添加这个CSS：
body.IE10, body.IE11 {
overflow-y: scroll;
-ms-overflow-style: scrollbar;
}
Why it works:
为什么有效：
- The
overflow-y:scrollpermanently turns on the<body>tag vertical scrollbar. - The
-ms-overflow-style:scrollbarturns off the auto-hiding behavior, thus pushing the content over and giving us the scrollbar layout behavior we're all used to.
- 该
overflow-y:scroll永久开启的<body>标签垂直滚动条。 - 在
-ms-overflow-style:scrollbar关闭自动隐藏行为转弯，从而推过的内容和给我们，我们都已经习惯到滚动条的布局行为。
Updated for users asking about IE11. - Reference https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)
为询问 IE11 的用户更新。- 参考https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)
回答by user2606817
Try this
尝试这个
body{-ms-overflow-style: scrollbar !important;}
回答by Primoshenko
This issue is also happening with Datatables on Bootstrap 4. Mi solution was:
Bootstrap 4 上的 Datatables 也会出现此问题。 Mi 解决方案是：
- Checked if the ie browser is opening.
- Replaced table-responsive class for table-responsive-ie class.
- 检查 ie 浏览器是否正在打开。
- 将表响应类替换为表响应类。
CSS:
CSS：
.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}
JS:
JS：
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) //If IE
{
$('#tableResponsibleID').removeClass('table-responsive');
$('#tableResponsibleID').addClass('table-responsive-ie');
}
回答by Toadmyster
Tried the @-ms-viewportand other suggestions but none worked in my case with IE11 on Windows 7. I had no scroll bars and the other posts here would at most give me a scroll bar that didn't scroll anywhere even though there was plenty of content. Found this article http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/which reduced to . . .
尝试了@-ms-viewport和其他建议，但在我的情况下，Windows 7 上的 IE11 没有任何效果。我没有滚动条，这里的其他帖子最多会给我一个滚动条，即使有滚动条也不会滚动到任何地方内容丰富。发现这篇文章http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/减少到 . . .
body {
overflow-x: visible;
}
body {
overflow-x: visible;
}
. . . and did the trick for me.
. . . 并为我做了伎俩。
