CssGaga 的 AutoRetina 生成的代码格式如下：
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (-moz-min-device-pixel-ratio:1.5),only screen and (-o-min-device-pixel-ratio:3/2),only screen and (min-device-pixel-ratio:1.5){
.sp-qzone{background-image:url(sprite/[email protected]);background-position:-99px 0;background-size:164px 32px}
}
在 rMBP 的 Safari6 及 Chrome 中（iOS 设备/非 retina 浏览器未测试，因为基本没用到过这个属性，推测也存在此问题），却发现某些元素的 background-size 效果无效。
通过审查元素的 css 面板调试，先去除 background-size 前面的勾将其禁用，之后再将其勾选则 background-size 生效！
解决方法
调整 css 写法的顺序，将 background-size 紧贴在 background-image:url() 屁股后，即
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (-moz-min-device-pixel-ratio:1.5),only screen and (-o-min-device-pixel-ratio:3/2),only screen and (min-device-pixel-ratio:1.5){
.sp-qzone{background-image:url(sprite/[email protected]);<strong>background-size:164px 32px;</strong>background-position:-99px 0}
}
使用 CssGaga 的同学直接升级至最新版 244 即可，css 代码无需任何改动。
浏览器没一个靠谱的啊。
延伸阅读：