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

183

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

IE10：

在此处输入图片说明

铬：

在此处输入图片说明

有人知道将滚动条始终固定在IE10上的方法吗？

溢出-y：滚动似乎不起作用！它只是将其永久放在我的网站上。

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

html  css  scrollbar  internet-explorer-11  internet-explorer-10 
— 吉米1988
source
我的IE10没有这种行为，您是否将其作为“地铁”应用程序运行？
— xec
不我不是。我在Windows 8中，如果有什么不同。我的笔记本电脑也是如此...您可能不会注意到此滚动条的行为，因为其他网站（例如stackoverflow）已经找到解决方法...我希望新图片有助于区分我做什么与不做什么之间的区别想要
— Jimmyt1988
与页面的设置宽度有关吗？
— Albzi 2013年
设置页面的宽度会起作用.. las，我想知道是否存在跨浏览器方式。考虑到Firefox，Safari和Chrome浏览器没有这种行为。我想我可以使用IE10专用的doo-raggy ..似乎并不是最优雅的答案。
— Jimmyt1988
@JamesT我也在w8上，但是找不到使IE10将滚动条呈现为覆盖图的任何页面（甚至没有我的测试页面，www.arngren.net）
— xec

Answers:

163

搜寻了一下之后，我偶然发现了一个讨论，其中“蓝墨水”留下的评论指出：

检查页面，我设法使用以下方法重现了这些页面：

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

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

在这种情况下，添加：

溢出-y：自动;

使滚动条自动隐藏

在引导响应-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;
}

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

— xec
source
74
您先生是一位绅士和学者！我将@ -ms-viewport {width：auto！important; }进入我的css文件，然后问题就解决了：D
— Jimmyt1988 2013年
4
很好的答案，我建议其他人阅读引导程序注释中引用的文章：timkadlec.com/2012/10/ie10-snap-mode-and-response-design- 从引导程序中删除该代码可能会破坏IE10的响应速度Windows 8 Metro
— tmsimont
@tmsimont好点。此外，他们似乎已经更改了最新的Boostrap源文件中的注释（使用新注释更新了我的答案），该文件现在提到了使用UA嗅探脚本将其应用于“ 仅 Surface /桌面Windows 8”-检查发出问题链接github.com/twbs/bootstrap/issues/10497
— xec
1
我确实很喜欢引导程序，但我希望它们将媒体和视口选项分隔在另一个文件中。我是第一次建立一个响应式网站，从字面上看，我不得不从引导程序中删除大量内容，以使我的网站按我希望的方式运行。
— 大卫
9
-ms-overflow-style：滚动条；似乎是更清洁的解决方案（请参阅第二个答案）。
— Manuel Arwed Schmidt
179

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

好消息是您不必删除此设置即可返回滚动条（在我们的情况下，我们依靠@ -ms-viewport设置进行响应式Web设计）。

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

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

将样式设置为滚动条以使滚动条返回：

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

滚动条

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

— 斯蒂芬
source
9
我将此添加到html元素上，即html{-ms-overflow-style: scrollbar;}它对我有用。在其他地方是否需要用例？
— nHaskins 2014年
7
body{-ms-overflow-style: scrollbar;}对我来说很好。.谢谢
— Manjit Singh 2014年
15
这应该是答案。接受的移除视口设备的适配。
— mnsth 2015年
它在x上增加了溢出
— Monicka 2015年
1
@ stefan.s这是正确的答案！应该接受
— eirenaios
12

解决方案：两个步骤-检测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/zh-cn/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85）

— 乱码
source
14
为什么不只做主体{-ms-overflow-style：滚动条; }？
— Scott Romack 2014年
7
-1您的代码在IE11上不起作用，在IE12上发布时将不起作用。有更好的方法来执行IE特定的样式。
— Joseph Lennox
1
@JosephLennox如果您可以添加一个答案，以指示做IE特定样式的更好方法，那么我相信gdibble和其他遇到此问题的人都会感激它。
— 出色的编译器
2
@ConspicuousCompiler“ -ms-”前缀已经足够使它成为IE。
— 约瑟夫·伦诺克斯
5
就像@ stefan.s的答案一样，但是有不必要的膨胀。
— Ry-
4

试试这个

body{-ms-overflow-style: scrollbar !important;}
— 用户名
source
0

Bootstrap 4上的数据表也发生了此问题。Mi解决方案是：

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

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');
        }
— 普里莫申科
source
-4

尝试了@ -ms-viewport和其他建议，但在Windows 7上使用IE11的情况下，都无法正常工作。我没有滚动条，这里的其他文章最多只能给我一个即使在有任何滚动的情况下也无法滚动的滚动条。内容丰富。在http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/中找到了这篇文章，将其简化为。。。

body { overflow-x: visible; }

。。。为我做了把戏

— 蟾蜍
source
2
问题不是关于缺少滚动条，而是关于使用引导程序时作为副作用引入的半透明滚动条覆盖。您也可以尝试body { overflow: auto; }
— xec 2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.