Question

我在谷歌浏览器中有这样的滚动条

enter image description here

但在IE 10中，它显示如下：

enter image description here

Answer 1

根据this answer here，它不适用于IE或FF。

然而，它们提供了一个使用jQuery解决方案的链接。（http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html)

Answer 2

您仍然可以在IE10中使用scrollbar-xxx-color属性。

scrollbar-track-color属性

指定滚动条的轨道元素的颜色。

CSS

div {
  width: 150px;
  height: 150px;
  border-style: solid;
  border-width: thin;
  overflow-y: scroll;
  font-family: sans-serif;
  float: left;
  margin-right: 10px;
}
.blueScroll {
  scrollbar-highlight-color: aqua;
  scrollbar-face-color: blue;
  scrollbar-arrow-color: blue;
  border-color: blue;
}
.redScroll {
  scrollbar-highlight-color: bisque;
  scrollbar-face-color: red;
  scrollbar-arrow-color: red;
  border-color: red;
}

HTML

<body>
  <div class="blueScroll">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div class="redScroll">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</body>

您可以在此处查看工作演示.. See demo

了解更多信息..阅读http://msdn.microsoft.com/en-us/library/ie/ms531160%28v=vs.85%29.aspx

IE 10在html中不显示滚动条

2 个答案: