Internet Explorer上不显示自定义滚动条

Question

我刚刚在CSS中创建了一个自定义滚动条，在谷歌浏览器中，滚动条显示效果很好，并且显示了我为它创建的样式，但在Internet Explorer中似乎并没有出现......它＆＃ 39; s出现默认滚动条。如何让这个滚动条出现在IE上？

这是一个Jsfiddle示例：http://jsfiddle.net/5Wne5/

::-webkit-scrollbar{
    width:6px;
    border-radius:10px;
} 
::-webkit-scrollbar-thumb{
    background-color:#B03C3F;
    border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{
    background-color:#BF4649;
    border:1px solid #333333;
}
::-webkit-scrollbar-thumb:active{
    background-color:#A6393D;
    border:1px solid #333333;
} 
::-webkit-scrollbar-track{
    border:1px gray solid;
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px #1f1f1f;
}

Answer 1

只有Safari，Chrome，Opera 15+支持

-webkit-，如评论中所述。

因此，您的CSS无法在IE中使用，但您可以使用此功能：

scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;

上述代码的致谢：http://codemug.com/html/custom-scrollbars-using-css/

以上代码并不适用于所有浏览器，以避免您使用jQuery。

有几个JS-Plugins可以在Webkit中实现与IE相同的外观和感觉。

• jQuery custom content scroller
• nanoScrollerJS

Answer 2

你的代码说明了一切。 -webkit-仅适用于Webkit浏览器：Chrome，Safari，Opera 15+都是Webkit。他们可能支持也可能不支持该代码。

Internet Explorer不是Webkit浏览器。这就是为什么它不起作用。

Firefox不再支持滚动条更改。

不建议更改操作系统功能的样式，这就是为什么它不属于W3C规范的原因。

IE代码：

scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;

信息：http://codemug.com/html/custom-scrollbars-using-css/

良好形象（来自上方）解释每个财产的作用：