Safari 5.x 上使用 CSS 的灰度图像

我试图在页面上显示一些图像，它们应该显示在灰度，鼠标悬停时除外，当它们平滑过渡到颜色时。我已经让它在 IE、Chrome 和 Firefox 上运行良好，但它不适用于 Safari 5.x。问题出在 Mac 版 Safari 上and适用于 Windows 的 Safari。这是我到目前为止的代码：

filter: url('desaturate.svg#greyscale'); 
filter: gray;
-webkit-filter: grayscale(1);

第一行加载一个外部 .svg 过滤器（我没有将其内联url("data:...规则因为我想避免旧版 Firefox 中的一个错误).

第二行是针对 IE 的，看起来效果和filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);.

关于 webkit 的最后一行应该适用于 Safari 6 及更高版本以及 Chrome。

是否有任何 CSS 规则可以显示灰度图像Safari 5.x？或者，如果这是不可能的，有人可以推荐一种 JavaScript 解决方案，最好是能够处理灰度动画和灰度动画的解决方案吗？我想避免服务器端黑客攻击使用灰度图像，因为这会弄乱我的 HTML，然后我必须进行一些讨厌的浏览器检测才能有条件地提供 HTML。

thanks

Edit:

由于这已成为一个“值得注意的问题”，因此请不要继续在此处发布更多仅适用于 Safari 6 及更高版本的答案，或在数据 URL 中包含 .svg 文件的答案。在我编写 OP 时，支持 Safari 和 Firefox 的某些版本对我来说很重要，这些版本现在被认为是very过时了，但这仍然是我最初的问题。

我很清楚，对于现代浏览器来说，灰度过滤可以通过几行 CSS 代码轻松完成，但在我做这个项目时，图形设计师使用的是 Safari 5.x，客户端使用的是 Firefox 3.x。对我有用的解决方案是 Giona 建议的，即使用 Modernizr 来测试 css 过滤，如果不支持则回退到 javascript。

如果我今天做同样的事情，我会告诉他们去更新他们的浏览器！

正如你所看到的caniuse.com, 目前很少有浏览器支持 CSS3 过滤器。

如果你谷歌一下，有很多 JavaScript/jQuery 后备方案”JavaScript 灰度插件”。 这里有一些：

• 灰度.js
• jQuery 灰度级插件
• Hoverizr
• 用画布做（教程）

但我没有使用它们的经验，所以我不能建议你哪一个是最好的。

I tried jQuery 黑白很久以前，它给我带来了很多关于相对/绝对定位图像的问题，所以也许可以避免它。

包括这个现代化建设在您的页面中，您可以通过 Javascript 定位不支持过滤器的浏览器：

if(!Modernizr.css_filters){
    /* javascript fallback here */
}

or CSS:

.no-css_filters .element {
    /* css fallback here */
}

哦，别忘了网站需要在每个浏览器上看起来完全相同吗？