关于pc版chrome在retina屏幕下的背景图片bug
2013-01-05 15:26
169 查看
前两天上线的一个项目,碰到了一个新鲜出炉的bug:
在retina屏幕下的chrome浏览器对background-size解析有bug。
发现一个英文的博客已经提到了这个问题,就翻译了一下,原文地址是:http://chriswharton.me/2012/08/google-chrome-for-macbook-pro-retina-bug/
具体来说在以下两种情况下background-size:属性都会失效:
解决方法是把background-size放到后面就行了
解决方法是在每一个background-image后面都跟上background-size
或者是给background-size加上important提高优先级。
在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提高优先级。
相关文章推荐
- 菜鸟vc问题,关于对话框用图片做背景的bug问题
- 关于JPanel设置背景图片的Bug说明
- 关于JPanel设置背景图片的Bug说明
- 关于width:100% 缩小窗口时 背景图片出现空白bug
- 关于MFC 对话框背景设置为图片
- 关于chrome表单input的黄色背景重置的解决方案
- qt creator应用中关于widget 背景图片的问题
- 手机浏览PC版页面出现背景图片显示不全的问题解决方案
- 关于安卓alertdialog你能用到的都在这里了(进出动画,显示位置,背景,设置内容,是否可以点击其他地方消失,屏幕不变暗)
- 给图片链接加边框,时,ff和chrome的bug问题
- qt中关于QWidget的背景颜色和背景图片的设置
- 背景图片充满屏幕不叠加
- 关于背景图片
- 实习小结三:关于背景图片的相对和绝对位置
- 关于多张图片和单个图片的背景选择的问题
- [转]一大波“关于BUG的类型”的图片 + 一小波笑话
- Firefox BUG:页面太大的时候background-image背景图片渲染出错
- 关于网页排版背景图片的问题
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
- 关于利用webpy的框架下,HTML无法加载CSS和背景图片的问题