Firefox和Chrome忽略背景尺寸了吗? [英] Firefox and Chrome ignoring background-size?
问题描述
我的网站上有许多媒体查询,它们会调整平板电脑/智能手机上各种元素的大小.我刚刚添加了另一个媒体查询来调整分辨率较低的笔记本电脑上相同元素的大小,发现Firefox和Chrome似乎无视我对背景尺寸的使用.
I have a number of media queries in my site that resize various elements on pads/ smartphones. I've just added another media query to resize the same elements on lower-resolution laptops and discovered that Firefox and Chrome seems to be ignoring my use of background-size.
媒体查询正在运行,其中一部分正在被拾取,但背景尺寸却没有.可以在野生动物园中正常工作.
The media query is working, parts of them are being picked up, but not background-size. It works fine in safari.
有什么想法吗?
我的CSS是:
@media only screen and (min-height: 768px) and (max-height: 800px) {
#title-we-are {
background-size:95%;
background: url(../img/title_we_are.png) bottom center no-repeat;
height:254px;
}
}
推荐答案
您的background-size
放在background
速记之前,因此常见问题属性.
Your background-size
is placed before your background
shorthand, so the shorthand overrides it with its default value (auto
), preventing your previous background-size
declaration from taking any effect. This is a common gotcha with using shorthand properties.
如果这在Safari中有效,则可能是Safari尚未更新其background
速记以识别background-size
值,从而允许您的background-size
正常工作.
If this works in Safari, chances are that Safari hasn't updated its background
shorthand to recognize background-size
values, allowing your background-size
to work.
您需要对其进行切换,以使您设置的background-size
值生效:
You need to switch them around so your set background-size
value can take effect:
@media only screen and (min-height: 768px) and (max-height: 800px) {
#title-we-are {
background: url(../img/title_we_are.png) bottom center no-repeat;
background-size:95%;
height:254px;
}
}
这篇关于Firefox和Chrome忽略背景尺寸了吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!