gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 10:55:28 29 4
gpt4 key购买 nike

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

这是我的所有浏览器版本中的样子: enter image description here

在一些较新版本的 Chrome 中,它是这样的: enter image description here

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,她的已经搞砸了,而我的仍然很好...

最佳答案

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

关于css - SVG Sprite 图标背景位置在较新版本的 Chrome 中出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24517865/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com