IE11和Opera上的CSS SVG精灵错误

Question

我想获得帮助，请使用CSS SVG精灵在IE11和Opera中遇到的问题。 出于某种原因，这两种浏览器都以非常错误的方式显示SVG，有时甚至根本不显示。

这是我的代码，适用于Chrome，Safari和Firefox：

.item {
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 40px;
    background: #eee url('1.svg') no-repeat 0 0;
}

.item.i1 {
    background-position: 5% 40%;
    background-size: 440%;
}

.item.i2 {
    background-position: 43.3% 40%;
    background-size: 417%;
}

.item.i3 {
    background-position: 82.6% 40%;
    background-size: 404%;
}

实时jsfiddle演示：http://jsfiddle.net/DBH29/

我错过了什么吗？如果没有，我的代码很好，并且没有办法解决它，那么我怎样才能使CSS回退到图像（PNG）或如何用Modernizr检测它？

Answer 1

可能与：SVG in Opera using CSS background-image with scaling有关，简而言之就是与Opera 12合作：

"Removing the width and height attributes in the svg"