css - 使用灰度悬停效果，在 FF 或 IE 中无法正常工作

Question

在Chrome中效果很好，在IE和FF中效果不佳。请在多个浏览器中查看此链接:

http://thebc.co/our-work

.portfolio-img{filter: url("data:image/svg+xml;utf8,#grayscale");/* Firefox 10+ <em>/filter: gray;/</em> IE6-9 <em>/-webkit-filter:grayscale(100%);/</em> Chrome 19+ & Safari 6+ <em>/-webkit-transition: all .6s ease;/</em> Fade to color for Chrome and Safari <em>/-webkit-backface-visibility: hidden; /</em> Fix for transition flickering */-moz-box-shadow:0 0 2px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 2px rgba(0,0,0,0.2);box-shadow:0 0 2px rgba(0,0,0,0.2)}





.portfolio-img:hover{filter:none;-webkit-filter:grayscale(0%);-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);box-shadow:0 0 4px rgba(0,0,0,0.4);-o-transition:.8s;-ms-transition:.8s;-moz-transition:.8s;-webkit-transition:.8s;transition:.8s}

Answer 1

因为 IE 和 Firefox 版本 16 不支持过滤器

来源http://caniuse.com/css-filters