首页 文章

在IE10中滚动条覆盖，你如何阻止它？

提问于
浏览 次
179

在IE10中，滚动条并不总是存在...当它出现时它作为一个叠加...这是一个很酷的功能但我想关闭我的特定网站，因为它是一个全屏应用程序和我的徽标和菜单背后都丢失了 .

IE10:

enter image description here

CHROME:

enter image description here

任何人都知道在IE10上总是将滚动条固定到位的方法吗？

overflow-y：滚动似乎不起作用！它只是将它永久地放在我的网站上 .

It may be bootstrap causing the issue but which part I have no idea! see example here: http://twitter.github.io/bootstrap/

html css twitter-bootstrap scrollbar internet-explorer-10

6 回答

  • 9

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

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

    回复于
  • 5

    SOLUTION: 两个步骤 - 检测是否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;
}

    Why it works:

    • 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)

    回复于
  • 175

    谷歌搜索了一下后，我偶然发现了这个; 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 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;
}

    这个片段是造成这种行为的原因 . 我建议阅读上面注释代码中列出的链接 . （在我最初发布这个答案后添加了它们 . ）

    回复于
  • -4

    试试这个

    body{-ms-overflow-style: scrollbar !important;}
    回复于
  • 0

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

    body { overflow-x: visible; }

    . . . 并为我做了伎俩 .

    回复于
  • 157

    这个问题也发生在Bootstrap 4上的Datatables .Mi解决方案是：

    • 检查ie浏览器是否正在打开 .

    • 替换了table-responsive-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');
        }
    回复于

相关问题