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屋！