前两天上线的一个项目,碰到了一个新鲜出炉的bug:
在retina屏幕下的chrome浏览器对background-size解析有bug。
发现一个英文的博客已经提到了这个问题,就翻译了一下,原文地址是:http://chriswharton.me/2012/08/google-chrome-for-macbook-pro-retina-bug/
具体来说在以下两种情况下background-size:属性都会失效:
1, background-size写在了background-image前面:
@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .element { background-size: 20px 20px; background-image: url(../img/img-2x.png); } }解决方法是把background-size放到后面就行了
2,background-size选择器的优先级比background-image优先级低:
.element.first { background-image: url(../img/img-2x.png); } .element.second { background-image: url(../img/img-2x.png); } .element { background-size: 20px 20px }解决方法是在每一个background-image后面都跟上background-size
.element.first { background-image: url(../img/img-2x.png); background-size: 20px 20px } .element.second { background-image: url(../img/img-2x.png); background-size: 20px 20px }
或者是给background-size加上important提高优先级。