Css SVG精灵图标背景位置在较新版本的Chrome中显示为关闭状态

我使用的是

背景图像

SVG sprite，在我的Safari、mobile Safari、Chrome、Firefox、Opera、IE等版本上，所有东西都看起来很棒。但是，对于我的一些拥有较新Chrome版本的同事来说，背景位置显示不正确（我知道其中一个在Mac上使用的是35.0.1916.153版本，有些在Windows上使用的是不同的更新版本）

以下是我的所有浏览器版本中的外观：

以下是一些较新版本的Chrome的外观：

HTML:

当我将代码放在JSFIDLE和Codepen上时，完全相同的代码在我同事的浏览器中正常工作，但无论如何，它是这样的：

以下是我尝试过的一些没有解决问题的方法：

• 将背景图像从数据URI编码的SVG更改为 常规.svg文件
• 使用像素作为背景位置，而不是百分比
• 添加

  font-family:sans-serif；

  （我在某个地方读到可能会修复它的内容-不知道）
• 删除边距，

  框大小：边框框；

  等

如果您对导致此问题的原因以及我如何解决此问题有任何想法，请告诉我--谢谢

---

更新：我把我的Chrome更新到了35.0.1916.153版，所以现在我和我的同事在mac上使用了完全相同的Chrome版本，她的Chrome和她的Chrome版本都被弄乱了，我的Chrome仍然很好……

更新：我添加了

preserveAspectRatio=“无”

作为svg文件中svg标记的一个属性，这就解决了它！这里的更多信息：

我也有同样的问题。我通过将

背景大小设置为精确值（而不是使用
自动
）来解决它。
我最初是这样定义svg精灵的大小的：

.icon {
    background-image: url("sprite.svg");
    background-size: 4em auto;
}

我把它改成了

.icon {
    background-image: url("sprite.svg");
    background-size: 4em 99em;
}

也许你应该把它报告为一个bug：然后点击“新问题”按钮你为我节省了很多时间。谢谢；）
.icon {
    background-image: url("sprite.svg");
    background-size: 4em auto;
}

.icon {
    background-image: url("sprite.svg");
    background-size: 4em 99em;
}