/ Bug

Webkit 内核浏览器 background-size 失效 bug

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 代码无需任何改动。

浏览器没一个靠谱的啊。

延伸阅读:

Google Chrome for MacBook Pro Retina bug