关于pc版chrome在retina屏幕下的背景图片bug

前两天上线的一个项目，碰到了一个新鲜出炉的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提高优先级。