在IE10中滚动条重叠,你怎么阻止呢?

在IE10中,滚动条并不总是在那里…当它出现时它作为一个覆盖…这是一个很酷的function,但我想closures我的具体网站,因为它是一个全屏应用程序和我的徽标和菜单丢失了。

IE10:

在这里输入图像描述

铬:

在这里输入图像描述

任何人都知道总是有滚动条固定在IE10位置的方式?

溢出-y:滚动似乎不工作! 它只是把它永久在我的网站上。

这可能是bootstrap导致的问题,但我不知道哪一部分! 看到这里的例子: http : //twitter.github.io/bootstrap/

谷歌search后,我偶然发现了这一点; http://channel9.msdn.com/Forums/Coffeehouse/IE10-how-does-the-scrollbar-autohide-on-buildwindowscom-microsoftcom “蓝色墨水”留下的评论指出:

检查页面,我设法重现它使用:

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

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

在这种情况下,添加:

溢出-y:auto;

使滚动条自动隐藏

在bootstraps responsive-utilities.less文件中,第21行可以find下面的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; } 

这个片段是导致行为的原因。 我build议阅读上面评论代码中列出的链接。 (他们是我最初发布这个答案后添加的。)

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

好消息是,你不必删除这个设置来获取滚动条(在我们的例子中,我们依靠@ -ms-viewport设置来响应网页devise)。

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

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

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

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

滚动条

指示元素在内容溢出时显示经典的滚动条types控件。 与-ms-autohiding-scrollbar不同,带有-ms-overflow-style属性设置为滚动条的元素的滚动条总是出现在屏幕上,当元素不活动时不会淡出。 滚动条不会叠加内容,因此会沿着元素边缘呈现额外的布局空间。

解决scheme:两个步骤 – 检测IE10,然后使用CSS:

在init上执行此操作:

 if (/msie\s10\.0/gi.test(navigator.appVersion)) { $('body').addClass('IE10'); } 

添加这个CSS:

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

为什么它的作品:

  • overflow-y:scroll永久打开<body>标签的垂直滚动条。
  • -ms-overflow-style:scrollbarclosures了自动隐藏行为,从而将内容推送给了我们所有习惯的滚动条布局行为。

尝试这个

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

尝试了@ -ms-viewport和其他build议,但没有任何工作在我的情况下与Windows 7上的IE11。我没有滚动条,其他职位在这里最多会给我一个滚动条,不滚动任何地方即使有充足的内容。 发现这篇文章http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/其中减less到。; 。 。

body { overflow-x: visible; }

。 。 。 并为我做了诡计。