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

Posted

技术标签:

【中文标题】如何防止滚动条覆盖 IE10 中的内容?【英文标题】:How can I prevent the scrollbar overlaying content in IE10? 【发布时间】:2013-06-07 08:43:01 【问题描述】:

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

IE10:

铬:

有人知道在 IE10 上始终将滚动条固定在适当位置的方法吗?

overflow-y:scroll 似乎不起作用!它只是将它永久地放在我的网站上。

可能是引导程序导致问题,但我不知道是哪一部分!在此处查看示例:http://twitter.github.io/bootstrap/

【问题讨论】:

我的 IE10 没有这种行为,你是把它作为“Metro”应用运行吗? 不,我不是。我在 Windows 8 中,如果这有什么不同的话。在我的笔记本电脑上也是如此...您可能不会注意到这种滚动条行为,因为其他网站(例如 ***)已经找到了解决方法...我希望新图片有助于区分我所做和不做的区别想要 是不是和设定的页面宽度有关? 设置页面的宽度会起作用..唉,我想知道是否有跨浏览器的方式。考虑到 firefox,safari 和 chrome 没有这种行为。我想我可以使用一个 IE10 特定的 doo-raggy.. 似乎不是最优雅的答案。 @JamesT 我也在 w8 上,但找不到任何让 IE10 将滚动条呈现为覆盖的页面(甚至不是我的首选测试页面,www.arngren.net)跨度> 【参考方案1】:

正如 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-autohiding-scrollbar 不同, -ms-overflow-style 属性设置为的元素上的滚动条 滚动条始终出现在屏幕上,并且不会淡出 元素处于非活动状态。滚动条不会覆盖内容,因此 沿着元素的边缘占用额外的布局空间 出现。

【讨论】:

我在 html 元素上添加了这个,即html-ms-overflow-style: scrollbar;,它对我有用。会有其他地方需要这样做的用例吗? body-ms-overflow-style: scrollbar; 工作正常。谢谢 这应该是答案。接受的删除视口设备适配。 它在 x 上添加了溢出 @stefan.s 这是正确答案!应该接受【参考方案2】:

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

检查页面后,我设法使用以下方法重现了它:

@-ms-viewport 宽度:设备宽度;

这会导致滚动条变得透明。有道理,因为 内容现在占据了整个屏幕。

在这种情况下,添加:

溢出-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;

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

【讨论】:

您先生是一位绅士和一位学者!我放置了@-ms-viewport width: auto !important; 到我的 css 文件中,问题就解决了:D 很好的答案,我建议其他人阅读引导程序评论中引用的文章:timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design - 从引导程序中删除该代码可能会破坏 Windows 8 Metro 中的 IE10 响应能力 @tmsimont 好点。此外,他们似乎已经更改了最新 Boostrap 源文件中的注释(用新的 cmets 更新了我的答案),现在提到使用 UA 嗅探脚本将其应用于“only Surface /desktop Windows 8" - 查看问题链接github.com/twbs/bootstrap/issues/10497 我真的很喜欢引导程序,但我希望他们将媒体和视口选项分开在不同的文件中。我是第一次构建一个响应式网站,我确实不得不从引导程序中删除大量内容,以使我的网站按照我想要的方式运行。 -ms-overflow-style:滚动条;似乎是更清洁的解决方案(见第二个答案)。【参考方案3】:

解决方案:两步 - 检测是否为 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 永久开启<body> 标签垂直滚动条。 -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; ? -1 您的代码在 IE11 上无法运行,并且在 IE12 发布时也无法运行。有更好的方法来制作特定于 IE 的样式。 @JosephLennox 如果您可以添加一个答案来表明一种更好的方式来执行特定于 IE 的样式,我相信 gdibble 和其他提出这个问题的人都会很感激。 @ConspicuousCompiler "-ms-" 前缀已经足以使它仅适用于 IE。 这就像@stefan.s 的回答,但有不必要的膨胀。【参考方案4】:

试试这个

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

【讨论】:

【参考方案5】:

Bootstrap 4 上的数据表也会出现此问题。我的解决方案是:

    检查 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');
          

【讨论】:

【参考方案6】:

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

body overflow-x: visible;

。 . .并为我做了伎俩。

【讨论】:

问题不在于缺少滚动条,而在于使用引导程序时作为副作用引入的半透明滚动条覆盖。你也可以试试body overflow: auto;

以上是关于如何防止滚动条覆盖 IE10 中的内容?的主要内容,如果未能解决你的问题,请参考以下文章

加载 twitter 引导模式对话框时,如何防止正文滚动条和移位?

如何防止收缩包装的容器滚动条与其内容重叠?

ie浏览器右边滚动条遮住了部分内容,怎么解决?

C# WPF:在高度属性设置为“自动”的 ListView 中防止水平滚动条覆盖最后一项

如何让table 表头随着滚动条滚动? 达到覆盖效果。 JS 、JQ大神求帮忙。

如何摆脱 IE 中文本区域的垂直滚动条?