我正在使用一个背景图像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上时,完全相同的代码在我的同事的浏览器中正常工作,但在这里呢反正是07000
以下是我尝试过的一些尚未解决的问题：
将背景图像从数据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
