SVG Fallback工作在标准但不是IE8，IE9怪癖

Question

我有一个SVG图标和相应的PNG图标。

我的目标是在浏览器支持时加载SVG图标，当浏览器不支持使用SVG后退的SVG（IE8，IE9-quirks）时加载PNG图标。

我也有一个限制，我应该只使用精灵。

我已经单独构建了精灵，在这方面没有任何问题。

现在我执行以下操作。

表示“abc”类的跨度，

span.abc {
  background: url(sprite.png) bg-posn-x bg-posn-y;
  background: rgba(0,0,0,0) url(sprite.svg) bg-posn-x bg-posn-y;
  width: npx;
  height: npx;
}

诀窍是不支持rgba的浏览器会回退到之前的背景延迟。

这在标准中非常有效，但不是ie8，即9个怪癖。

不幸的是，我不应该将页面转换为标准。

之前是否有人遇到此问题/知道如何解决？

Answer 1

我建议使用像Modernizer这样的功能进行功能检测来解决这个问题，依赖于浏览器后备可能会有时会让人感到痛苦。点击此处：http://modernizr.com/docs/

它会向身体添加类，如＆＃34; no-rgba＆＃34;所以你会知道何时做一个解决方法。