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添加到您的小提琴。

其次，您需要更改以下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/

如何在所有浏览器上使css / js对象相同

1 个答案: