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

Posted 2023-05-08

【中文标题】如何让我的 CSS 代码在 Firefox 和 IE 上运行

【英文标题】：How can I get my CSS code to work on Firefox and IE

【发布时间】：2017-09-17 16:43:17

【问题描述】：

我有一个从灰度到彩色的图像悬停，适用于我网站中的所有图像。它在 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;

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

【参考方案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 */

【讨论】：

谢谢，它现在可以在 Firefox 中运行，但在 IE 中没有运气。

好的，一倒，一走。哪个版本的 IE？

实际上，我认为版本无关紧要 - IE 不支持任何版本的 CSS 过滤器，caniuse.com/#feat=css-filters 您可以尝试 javascript 解决方案，如下所述：ajaxblender.com/…

【参考方案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 相同的前缀。

【讨论】：

供应商前缀不是这样工作的。你不能只对所有东西都加上 -ms- 来让它工作。

好吧，我没有“打它”。 -ms- 前缀在 Edge 浏览器中进行了测试，鉴于 IE 和 Edge 都是 Microsoft 产品，它们不会使用相同的供应商前缀吗？悬停效果有效。

@Mr Lister 我绝对不是想在这里开始战斗，我只是脱离我自己对前缀的理解。 Microsoft Developer Network (msdn.microsoft.com/en-us/library/ms530752(v=vs.85).aspx) 有一篇文章描述了 -ms-filter 前缀的存在。但是，结合您所说的，此功能在 IE 9 中已弃用，并在 IE 10 中删除。但是，如果 OP 想要保留对旧浏览器版本的旧支持，则可能值得考虑。就过渡而言，我不确定。把它扔出去！

我忘记了那个。对不起。但这完全是另一个属性，与标准 filter 无关，不应用作它的别名。