html - CSS灰度问题

Question

我有几个问题：

1. 如何在IE10中制作灰度？下面的代码不兼容 ie10。
2. FF 根本不进行转换。我究竟做错了什么？
3. FF 在悬停时将图像向左移动/抖动 1px。为什么？

Chrome 和 IE9 一切正常。过渡正常，没有图像移动。这是我的CSS代码：

.grayscale{

    -webkit-filter:grayscale(1);    /* Chrome 19+ & Safari 6+ */
/*  transition:-webkit-filter 1.3s; /* for chrome */

    filter:gray;    /* IE6-9 */
    /* Firefox 3.5+ */
    filter:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale'); /**/


    -webkit-transition:all 1.3s;
    -moz-transition:all 1.3s;
    -o-transition:all 1.3s;
    transition:all 1.3s;    /* for chrome */
/*  
    -webkit-transition:grayscale(1) 0.8s;

    -moz-transition:filter 0.8s;
    -o-transition:filter 0.8s;
    transition:filter 0.8s;
*/
}
.grayscale:hover{
    -webkit-filter:grayscale(0);    /* chrome*/
    filter:none;    /*ff, IE */
}