在Firefox上,我的对象看起来还不错,但是在Chrome / IE上却有重影。你可以在这里看到它:
http://jsfiddle.net/DFCB3/3/

在其他浏览器上的外观:
http://gyazo.com/0ee27df5904ff3aca036191f69e89cb6.png

我认为这段代码可能与它有关:

<img src="http://upload.wikimedia.org/wikipedia/commons/5/50/Bitcoin.png" class="grayscale"/>


如何使它在Firefox之类的所有浏览器上都能正常工作?

最佳答案

两件事情。首先,您需要将jQuery添加到您的Fiddle中。

其次,您需要更改以下CSS:

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
    -webkit-transition: all .6s ease;
    -webkit-backface-visibility: hidden;
}


对此:

img.grayscale {
    position: absolute;
    top: 0px;
    left: 0px;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
    -webkit-transition: all .6s ease;
    -webkit-backface-visibility: hidden;
}


否则只需将两个img标签设为position: absolute;

http://jsfiddle.net/FdD5L/

关于javascript - 如何在所有浏览器上使css/js对象相同,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20390447/

10-13 01:44
查看更多