css – SVG精灵图标的背景位置出现在较新版本的Chrome中

我正在使用一个背景图像SVG精灵,一切都看起来很棒,我的版本的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上时,完全相同的代码在我的同事的浏览器中正常工作,但在这里呢反正是070​​00

以下是我尝试过的一些尚未解决的问题：

将背景图像从数据URI编码的SVG更改为a
常规.svg文件
>使用像素为背景位置而不是百分比
添加font-family：sans-serif; (我读到某处可能会修复它 – 不知道)
>删除边距,框大小：边框等.

如果您有任何关于可能导致此问题的建议,以及我如何解决问题,请通知我们 – 谢谢！

更新：我更新我的Chrome到版本35.0.1916.153,所以现在我的同事和我正在使用完全相同的版本的Chrome的Mac,她的混乱,我的还是很好…

解决方法

更新：我在svg文件的svg标签中添加了preserveAspectRatio =“none”作为属性,并修复它！更多信息： http://www.yootheme.com/support/question/6801?order=modified

原文地址：https://www.jb51.cc/css/214133.html