IE10和IE11在图像滤镜方面还是比较坑爹的，不能执行filter滤镜，而且连svg滤镜也不支持，所以通常是用js来实现这个效果的。
具体可以参考下面这段代码：
var imgObj = document.getElementById('imgToGray')
function gray(imgObj) {
var canvas = document.createElement('canvas')
var canvasContext = canvas.getContext('2d')
var imgW = imgObj.width
var imgH = imgObj.height
canvas.width = imgW
canvas.height = imgH
canvasContext.drawImage(imgObj, 0, 0)
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH)
for (var y = 0 y < imgPixels.height y++) {
for (var x = 0 x < imgPixels.width x++) {
var i = (y * 4) * imgPixels.width + x * 4
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3
imgPixels.data[i] = avg
imgPixels.data[i + 1] = avg
imgPixels.data[i + 2] = avg
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height)
return canvas.toDataURL()
}
imgObj.src = gray(imgObj)
还有一些跨浏览器的解决方案，代码太多，不贴出来了，百度一下就能够找到。
#gradient {/* Firefox*/
background-image: -moz-linear-gradient( top, #81a8cb, #4477a1 )
/* Safari & Chrome */
background-image: -webkit-gradient(linear , left bottom , left top , color-stop( 0, #4477a1 ) ,
color-stop( 1, #81a8cb ))
/* IE6 & IE7 */
filter: progid:DXImageTransform.Microsoft.gradient( GradientType= 0 , startColorstr = '#81a8cb',
endColorstr = '#4477a1' )
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#81a8cb',
endColorstr = '#4477a1' )"
}
文档上只提供2个颜色，所以我们也拿它没办法。但是想提醒一下，使用渐变无论哪个浏览器对其性能都是影响很大的。fixed 圆角 投影 渐变这是最影响浏览器性能的几个css属性
