【问题标题】:IE10 stop scroll bar from appearing over content and disappearingIE10 阻止滚动条出现在内容上并消失
【发布时间】:2013-05-25 18:25:38
【问题描述】:

如果您访问的任何网站的内容会导致 ie10(桌面)中出现垂直滚动条,例如 http://www.buildwindows.com/,您会注意到滚动条仅在您将鼠标悬停在窗口上时才会出现。

是否有强制滚动条始终显示?我担心这会让页面下方有更多内容变得不那么明显。

谢谢

【问题讨论】:

标签: css internet-explorer-10


【解决方案1】:

有一个自定义的供应商前缀 CSS 属性需要设置:

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

其他选项包括autononescrollbar-ms-autohiding-scrollbar。后者会导致您遇到的行为。

摘自MSDN documentation,特别是上面提到的scrollbar值:

指示元素在其内容溢出时显示经典滚动条类型的控件。

-ms-autohiding-scrollbar 不同,-ms-overflow-style 属性设置为scrollbar 的元素上的滚动条始终显示在屏幕上,并且在元素处于非活动状态时不会淡出。

【讨论】:

  • 谢谢。这正是我所追求的!
  • 还要花费更多时间让网站在 IE 中正确显示。 +1,为我工作。
  • 这很好用,但我很好奇在 windows 手机或平板电脑上会发生什么?在我的计算机上,我想摆脱这种行为,因为滚动条出现在内容上方。您知道是否有办法为平板电脑和手机等纯触摸设备禁用它?
  • @Redtopia - 通常,在移动设备上,滚动条是不显眼的并且具有自动隐藏的默认行为。如果您发现其他更适合您的 -ms-overflow-style 选项,只需为触摸设备或具有不同值的不同屏幕尺寸创建相同的 .html 规则。
  • 这正是我想要的。
【解决方案2】:

这应该可以解决问题,当屏幕大于 992 像素时,媒体查询将防止滚动消失。 (我假设 Windows 移动设备需要它来隐藏滚动条。这就是我进行媒体查询的原因)。

@-ms-viewport {
  width: device-width;  
}
@media (min-width: 992px) {
  @-ms-viewport {
    width: auto !important;
  }
}

【讨论】:

    【解决方案3】:

    css 样式

    overflow-y:scroll;

    将使其设置的元素始终具有垂直滚动条

    【讨论】:

    • 你可能必须使用overflow:scroll;,IE 可能没有实现overflow-y 样式。另外,您将样式应用于什么?
    • 那么它也不起作用。给我看一个你已经实现它的网站,并在 IE10 中检查。将此样式应用于 1. HTML、2. 正文、3. HTML、正文。
    • 感谢您的回答,但这并不是在没有足够的内容导致滚动条时强制滚动条。这是关于阻止 IE10 隐藏滚动条直到悬停在窗口上。想一想,我认为这发生在 Mac 上,但感觉更好。
    【解决方案4】:

    我在 html 元素上添加了这个,即 html{-ms-overflow-style: scrollbar;} 它对我有用。

    【讨论】:

      【解决方案5】:

      添加此 META-Tag 有效:

      <meta http-equiv="X-UA-Compatible" content="IE=9">
      

      【讨论】:

      • 感谢您的回复。我认为除非有一些代码可以专门阻止这种情况的发生,否则我只会忍受它而不是改变渲染模式。
      • 这可能会解决问题,但是你会卡在使用 IE9 渲染引擎,这可能不是一个好主意。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-06-07
      • 1970-01-01
      • 1970-01-01
      • 2011-02-04
      • 1970-01-01
      • 2019-06-30
      相关资源
      最近更新 更多