IE10中的滚动条覆盖,你如何阻止？
Jim*_*988 182 html css scrollbar internet-explorer-10 internet-explorer-11
在IE10中,滚动条并不总是存在...当它出现时它作为一个叠加...它是一个很酷的功能但我想关闭我的特定网站,因为它是一个全屏应用程序和我的徽标和菜单背后都丢失了.
IE10:
铬:
任何人都知道在IE10上始终将滚动条固定到位的方法吗？
overflow-y:滚动似乎不起作用!它只是将它永久地放在我的网站上.
它可能是导致问题的引导,但我不知道哪个部分!看这里的例子:http://twitter.github.io/bootstrap/
ste*_*n.s 178
正如xec在他的回答中提到的,这种行为是由@ -ms-viewport设置引起的.
好消息是,你不必删除此设置以获取滚动回(在我们的例子中,我们依靠@ -ms视口设置为响应网页设计).
您可以使用-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属性的元素上的滚动条始终显示在屏幕上,并且在元素处于非活动状态时不会淡出.滚动条不会覆盖内容,因此会沿着元素边缘占据额外的布局空间.
- 这应该是答案.接受的一个删除视口设备适应. (15认同)
- 我在html元素上添加了这个,即`html {-ms-overflow-style:scrollbar;}`,它对我有用.是否会出现其他地方需要的用例？ (9认同)
- `body {-ms-overflow-style:scrollbar;}`为我工作正常..谢谢 (7认同)
xec*_*xec 161
谷歌搜索了一下后,我偶然发现了这个; http://channel9.msdn.com/Forums/Coffeehouse/IE10-how-does-the-scrollbar-autohide-on-buildwindowscom-microsoftcom"Blue Ink"留下的评论指出:
检查页面,我设法通过使用以下方式重现它:
@ -ms-viewport {width:device-width; }
这会导致滚动条变得透明.有道理,因为内容现在占据了整个屏幕.
在这种情况下,添加:
overflow-y:auto;
使滚动条自动隐藏
在bootstraps的响应 - 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;
}
这个片段是造成这种行为的原因.我建议阅读上面注释代码中列出的链接.(在我最初发布这个答案后添加了它们.)
- 你先生是绅士和学者!我放置了@ -ms-viewport {width:auto!important; 进入我的css文件然后问题就出现了:D (73认同)
- -ms-overflow-style:滚动条; 似乎是更清洁的解决方案(见第二个答案). (8认同)
- 很好的答案,我建议其他人你阅读bootstrap评论中引用的文章:http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ - 从bootstrap中删除该代码可能会破坏Windows 8地铁的IE10响应能力 (4认同)
gdi*_*ble 10
解决方案:两个步骤 - 检测是否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.- 参考https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)
- 你为什么不做身体{-ms-overflow-style:scrollbar; }？ (14认同)
- -1你的代码在IE11上不起作用,它在IE12发布时不会出现.有更好的方法来做IE特定的风格. (7认同)
- 这就像@ stefan.s的答案,但有不必要的膨胀. (5认同)
- @ConspicuousCompiler"-ms-"前缀已经足以使它成为IE浏览器. (2认同)
| 归档时间： |
|
| 查看次数： |
75407 次 |
| 最近记录： |