CSS 滤镜色度不适用于 IE 11

Question

我在 5 月的主页中有一个 iframe，我想为其中的水平滚动条提供透明度。在 chrome 浏览器中 -webkit css 样式有效，但我在 IE 中也需要它。我搜索了很多，每个人都说使用 filter:chroma 应该有效。我还阅读了这些示例 msdn。在 msdn 示例中，他们说它应该在 IE 5.5 及更高版本上工作，但我看不到在 IE 11 中工作的结果。还有像我这样的人在 msdn 页面上发表评论说 filter:chroma 在 IE 11 上不起作用. 那么我如何在 CSS 代码中过滤 IE 11 中的特定颜色或者我如何为滚动条提供透明度？

这是我用于 IE 的代码示例

body #myIframe {
/*IE 5.5. and later*/
scrollbar-track-color: #FF00FF;
scrollbar-face-color: #FF00FF;
scrollbar-highlight-color: #FF00FF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FF00FF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
filter: chroma(#FF00FF);
filter: progid:DXImageTransform.Microsoft.Chroma(color='#FF00FF');/*same as the above line*/
}

这是在 chrome 浏览器上运行的代码示例。

/*chrome scrollbar style*/
::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

Answer 1

许多浏览器不再支持 css 滚动条的变化。

你有一个这样的js解决方案： jscrollpane

将此添加到您的 Head 标签：

<!-- styles needed by jScrollPane -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />

<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>

并且这个 jQuery 跟随到您的容器：

$('.scroll-pane').jScrollPane();

CSS 滤镜色度不适用于 IE 11

CSS Filter Chroma Does Not Work On IE 11

css

internet-explorer

scrollbar