css - SVG Sprite 图标背景位置在较新版本的 Chrome 中出现

Question

我使用的是 background-image SVG sprite，在我的 Safari、移动 Safari、Chrome、Firefox、Opera、IE 等版本上一切看起来都很棒。但是，背景位置不是对于我的几个使用较新版本的 Chrome 的同事，它无法正确显示(我知道他们中的一个在 Mac 上使用版本 35.0.1916.153，有些在 Windows 上使用不同的较新版本)。

这是我的所有浏览器版本中的样子:

在一些较新版本的 Chrome 中，它是这样的:

HTML:

<span class="icon icon--chat"></span>

CSS:

.icon{
    background:url(data:image/svg+xml;base64,[data]);
    font-family:sans-serif;
    background-position:top left;
    background-size:cover;
    display:inline-block;
    width:100px;
    height:100px;
    padding:0;
    margin:15px;
    cursor:default;
}

.icon--chat{
    background-position:0 4%;
}

当我把它放在 JsFiddle 和 Codepen 上时，完全相同的代码在我同事的浏览器中工作正常，但无论如何它在这里:http://jsfiddle.net/HgR2N/

以下是我尝试过但未能解决问题的一些方法:

• 将背景图像从数据 URI 编码的 SVG 更改为 常规 .svg 文件
• 对 background-position 使用像素而不是百分比
• 添加 font-family:sans-serif;(我在某处读到可能会修复它 - 不知道)
• 去除边距、box-sizing:border-box; 等

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

更新:我将我的 Chrome 更新到版本 35.0.1916.153，所以现在我和我的同事使用的是完全相同版本的 Chrome for mac，她的已经搞砸了，而我的仍然很好...

Answer 1

更新:我在 svg 文件的 svg 标签上添加了 preserveAspectRatio="none" 作为属性，然后修复了它!更多信息在这里:http://www.yootheme.com/support/question/6801?order=modified