Question

我的网站中的所有图片都有一个从灰度到颜色悬停的图像，网站范围广泛。它在Safari和Google中运行完美，但在Firefox和Internet Explorer中它根本不起作用。这是代码：

img {
  -webkit-filter: grayscale(100%); /* For Webkit browsers */
  -webkit-transition: .5s ease-in-out; /* For Webkit browsers */
  -moz-filter: grayscale(100%); /* For Firefox */
  -moz-transition: .5s ease-in-out; /* For FireFox */
  -o-filter: grayscale(100%);
  -o-transition: .5s ease-in-out;
} 

img:hover {
  -webkit-filter: grayscale(0%); /* For Webkit browsers */
  -webkit-transition: .5s ease-in-out; /* For Webkit browsers */
  -moz-filter: grayscale(0%); /* For Firefox */
  -moz-transition: .5s ease-in-out; /* For Firefox */
  -o-filter: grayscale(0%); 
  -o-transition: .5s ease-in-out;
}

我确信这很简单，但不确定是什么。谢谢，Autum

Answer 1

Firefox可能已弃用供应商前缀，并且IE没有前缀。试试这个：

img {
    filter: grayscale(100%); /* For modern browsers */
    transition: .5s ease-in-out; /* For modern browsers */
    -webkit-filter: grayscale(100%); /* For Webkit browsers */
    -webkit-transition: .5s ease-in-out; /* For Webkit browsers */
    -o-filter: grayscale(100%); /* For Opera */
    -o-transition: .5s ease-in-out; /* For Opera */
} 

img:hover {
    filter: grayscale(0%); /* For modern browsers */
    transition: .5s ease-in-out; /* For modern browsers */
    -webkit-filter: grayscale(0%); /* For Webkit browsers */
    -webkit-transition: .5s ease-in-out; /* For Webkit browsers */
    -o-filter: grayscale(0%); /* For Opera */
    -o-transition: .5s ease-in-out; /* For Opera */
}

Answer 2

另外 - 因为这就是我的代码 - 尝试为Internet Explorer添加这些过滤器转换：

-ms-filter: grayscale(100%);
-ms-transition: .5s ease-in-out;

-ms-filter: grayscale(0);
-ms-transition: .5s ease-in-out

在中添加应该添加对IE的支持;这些转换和过滤器刚刚在Microsoft Edge中成功测试，我猜测它应该使用相同的前缀到IE。

如何让我的CSS代码在Firefox和IE上运行

2 个答案: