如何在所有瀏覽器上使css / js對象相同

Question

在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）上都能正常工作？

Answer 1

兩件事情。 首先，您需要將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/