如何防止滚动条在 IE10中重叠内容？

在 IE10中，滚动条并不总是在那里... ... 当它出现时，它是一个覆盖... ... 这是一个很酷的功能，但我想关闭它为我的特定网站，因为它是一个全屏应用程序，我的标志和菜单丢失在它后面。

IE10:

enter image description here

铬:

enter image description here

有人知道在 IE10上总是将滚动条固定在某个位置的方法吗？

溢出: 滚动似乎没有工作! 它只是把它永久放在我的网站。

它可能是引导程序引起的问题，但我不知道哪一部分

80145 次浏览
小开
最佳答案

在谷歌了一下之后，我偶然发现了一个讨论，“ Blue Ink”留下了一条评论:

检查页面，我设法复制它通过使用:

@-ms-viewport { width: device-width; }

这会使滚动条变得透明 内容现在占据了整个屏幕。

在这种情况下，补充道:

自动溢出;

让滚动条自动隐藏

在 Bootstraps 响应-实用程序. 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;
}

这个片段就是导致这种行为的原因。我建议阅读上面注释代码中列出的链接。(它们是在我最初发布这个答案之后添加的。)

小开

正如 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;
}

滚动条

指示元素显示经典滚动条类型 与 -ms-autohide-scrollbar 不同, 属性设置为 -ms-overflow 样式的元素上的滚动条 滚动条始终出现在屏幕上，并且当 元素是非活动的。滚动条不覆盖内容，因此 沿着元素的边缘占用额外的布局空间 出现。

小开

解决方案: 两步——检测 IE10，然后使用 CSS:

在 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

添加 CSS:

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

原因:

  • overflow-y:scroll永久打开 <body>标签的垂直滚动条。
  • -ms-overflow-style:scrollbar关闭了自动隐藏行为，从而将内容推过来，给我们提供了我们都习惯的滚动条布局行为。

为询问 IE11的用户更新。 - 参考文献 < a href = “ https://Learn.microsoft.com/en-us/before-version/windows/internet-Explorer/ie-developer/ ms537503(v = vs. 85)”rel = “ nofollow noReferrer”> https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

小开

尝试了 @-ms-viewport和其他建议，但没有一个在我的情况下与 IE11在 Windows7。我没有滚动条，这里的其他帖子最多只能给我一个滚动条，即使有很多内容，也不会滚动到任何地方。发现这篇文章 http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/减少到. 。

身体{ 溢出-x: 可见; }

帮了我一个大忙。

小开

试试这个

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

这个问题也发生在 Bootstrap 4的数据表上，Mi 的解决方案是:

  1. 检查 IE 浏览器是否打开。
  2. 替换表响应类为表响应-即类。

CSS:

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

约翰逊:

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

提交答案