html - CSS グレースケールに関する質問

Question

いくつかの質問を聞きたいんです：

1. IE10でグレースケールにする方法は? 以下のコードは ie10 と互換性がありません。
2. FF はトランジションをまったく行いません。私は何を間違っていますか？
3. FF はホバー時に画像を 1 ピクセル左に移動/ジッターします。なんで？

Chrome と IE9 はすべて正しく動作します。トランジションはOK、画像は動かない。これが私の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 */
}