如何防止滚动条覆盖 IE10 中的内容？

正如 xec 在他的回答中提到的，这种行为是由 @-ms-viewport 设置引起的。

好消息是您不必删除此设置即可恢复滚动条（在我们的示例中，我们依赖 @-ms-viewport 设置来进行响应式网页设计）。

您可以使用 -ms-overflow-style 来定义溢出行为，如本文所述：

http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx

将样式设置为滚动条以获取滚动条：

body {
    -ms-overflow-style: scrollbar;
}

scrollbar 指示元素在其内容溢出时显示经典的滚动条类型控件。与 -ms-autohiding-scrollbar 不同，将 -ms-overflow-style 属性设置为 scrollbar 的元素上的滚动条始终出现在屏幕上，并且在元素处于非活动状态时不会淡出。滚动条不会覆盖内容，因此会占用它们出现的元素边缘的额外布局空间。

---

在谷歌搜索了一下之后，我偶然发现了一个讨论，其中“Blue Ink”留下的评论指出：

检查页面，我设法使用以下方法重现它：@-ms-viewport { width: device-width; } 这会导致滚动条变得透明。有道理，因为内容现在占据了整个屏幕。在这种情况下，添加：溢出-y：自动；使滚动条自动隐藏

在 bootstraps responsive-utilities.less file, line 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;
}

此代码段是导致该行为的原因。我建议阅读上面注释代码中列出的链接。 （它们是在我最初发布此答案后添加的。）

---

解决方案：两个步骤 - 检测是否为 IE10，然后使用 CSS：

在初始化时执行此操作：

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

添加这个CSS：

body.IE10, body.IE11 {
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}

为什么有效：

overflow-y:scroll 永久开启 标签垂直滚动条。

-ms-overflow-style:scrollbar 关闭自动隐藏行为，从而将内容推送过来并为我们提供我们都习惯的滚动条布局行为。

为询问 IE11 的用户更新。 - 参考 https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

---

尝试这个

body{-ms-overflow-style: scrollbar !important;}

---

这个问题也发生在 Bootstrap 4 上的数据表中。我的解决方案是：

检查ie浏览器是否打开。将 table-responsive-ie 类替换为 table-responsive-ie 类。

CSS：

.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}

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');
        }  

---

尝试了 @-ms-viewport 和其他建议，但对于我在 Windows 7 上使用 IE11 的情况，都没有。我没有滚动条，这里的其他帖子最多只能给我一个没有滚动条的滚动条即使有很多内容，也可以在任何地方滚动。发现这篇文章 http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ 已简化为 。 . .

body { overflow-x: visible; }

. . .并为我做了伎俩。

---