Css 如何在浏览器间模糊图像？

在Chrome中，下面的CSS使图像模糊。但是，当我在firefox中查看图像时，图像不再模糊。有没有关于如何让它跨浏览器工作的建议

div.wrapper{
    float:left; /* important */
    position:relative; /* important(so we can absolutely position the description div */ 
    padding: 5px;
}

div.imageblur{
    position: relative; 
    top: 0; 
    left: 0; 
    width: 320px; 
    filter: blur(5px);
       -webkit-filter: blur(5px);
       -moz-filter: blur(5px);
       -o-filter: blur(5px);
       -ms-filter: blur(5px);

   margin:-1px;
   padding:1px;
}

div.image_container{
   width:318px;
   overflow:hidden;
}

html

---

这是因为webkit是唯一一个支持

过滤器的工具

另请参见：
Firefox也支持过滤器，但语法有点复杂：下面是我在fiddle上介绍的示例：

img{
    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"); /* Firefox 3.5+ */
    filter: grayscale(100%);
}

img{
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；/*Firefox 3.5+*/
滤镜：灰度（100%）；
}

CSS过滤器非常新，因此几乎没有支持。Safari（夜间）和Chrome目前只支持它，因为webkit。
关于浏览器供应商前缀的提示：最后包括非供应商css规则。
img{
    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"); /* Firefox 3.5+ */
    filter: grayscale(100%);
}