Firefox和Chrome忽略背景大小？

我在我的网站上有很多媒体查询，这些查询调整了手持设备/智能手机上的各种元素。我刚刚添加了另一个媒体查询，以在较低分辨率的笔记本电脑上调整相同的元素，并发现Firefox和Chrome似乎忽略了我对背景大小的使用。Firefox和Chrome忽略背景大小？

媒体查询正在工作，其中部分正在拾取，但不是背景大小。它在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; 
    } 
}

来源

2013-04-11 evilscary

你background-size放在你的background速记前，所以the shorthand overrides it with its default value (auto)，防止把你以前background-size声明任何效果。这是使用简写属性的common gotcha。

如果此功能在Safari中有效，Safari很可能没有更新其background速记以识别background-size值，从而允许您的background-size工作。

你需要周围切换他们，让您设定background-size值生效：

@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; 
    } 
}

来源

2013-04-11 14:42:51 BoltClock

天才！那修好了。 – evilscary 2013-04-11 15:08:10

..因为他们有另一个CSS格式：

-webkit-background-size: cover; //safari chrome 
-moz-background-size: cover; // firefox 
-o-background-size: cover; // opera

来源

2013-04-11 13:56:20 Guggly

的真实根据该https://developer.mozilla.org/en-US/docs/CSS/background-size#Browser_compatibility他们不再需要-moz前缀。我用前缀尝试过，并没有奏效。 – evilscary 2013-04-11 13:58:41

嗯..试了一下，它的工作:( – Guggly 2013-04-11 14:01:20

附加信息：我已经确定，使用“背景图像：网址（）”中的铬，背景大小呢不行。

只有在使用“background：url（）”速记时，background-size才会有效果。

这是因为铬56.0.2924.87（64位）

来源

2017-02-06 16:37:05

Firefox和Chrome忽略背景大小？

回答

相关问题