IE11 和 Opera 上的 CSS SVG sprite 错误答案

【问题标题】：CSS SVG sprite wrong on IE11 and OperaIE11 和 Opera 上的 CSS SVG sprite 错误
【发布时间】：2014-06-10 20:30:37
【问题描述】：

我想就我在使用 CSS SVG sprite 的 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 检测它？

【问题讨论】：

只是补充一点：更准确地说，旧的好 Opera 12.x（不是较新的 webkit 版本）确实如此。
"这是我在 Chrome、Safari 和 Opera 上运行良好的代码：" 也许您的意思是它在 Chrome 和 Firefox 上运行良好？
@dsuess 是的，我说的是“旧”歌剧，而不是 Opera-next 版本。
@Anonymous 是的，感谢您的更正:)
也相关：stackoverflow.com/questions/7830158/…

标签： html css svg

【解决方案1】：

可能与：SVG in Opera using CSS background-image with scaling 相关，简而言之与 Opera 12 一起使用：

"Removing the width and height attributes in the svg"

【讨论】：

谢谢，我刚试过，但不幸的是它没有用。