CSS背景的Safari问题答案

【问题标题】：Safari issue with CSS backgroundCSS背景的Safari问题
【发布时间】：2014-04-08 14:42:19
【问题描述】：

此代码似乎适用于除 Safari 之外的所有设备。

background:url("/images/nav.png") 无重复滚动中心 center / 17px 17px rgba(0, 0, 0, 0)

当我擦除“/ 17px 17px”时，我会看到我的图像显示在该元素上。当我在 safari web inspector 中查看它时，它会显示 CSS 代码

background:url("/images/nav.png") 无重复滚动中心中心/17px 17px 透明

其他人遇到过类似的事情吗？它曾经可以工作，但后来我不得不缩放图像，这就是 Safari 问题出现的时候。谢谢！

【问题讨论】：

检查下面我的答案中的小提琴，它显示了嵌入背景大小和单独声明背景大小的不同行为

标签： css background safari

【解决方案1】：

试试这个代码：

background:url("/images/nav.png") no-repeat center center rgba(0, 0, 0, 0);
-webkit-background-size: 17px 17px; //webkit support
-moz-background-size: 17px 17px; //Mozilla support
-o-background-size: 17px 17px; //Opera support
background-size: 17px 17px;

它适用于所有浏览器。

【讨论】：

-moz-background-size 从 Firefox 3.6 (Gecko 1.9.2) 开始支持，但是从 4.0 开始不再支持。我认为其他人也是如此，请阅读：css3.info/preview/background-size

【解决方案2】：

似乎 Safari 无法解释 background 中的大小。

尝试添加：

background-size: 17px 17px;

所以你的 css 看起来像：

background:url("/images/nav.png") no-repeat scroll center center rgba(0, 0, 0, 0);
background-size: 17px 17px;

这里是fiddle，显然你需要Safari浏览器才能看到区别

【讨论】：