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忽略背景大小？

回答

相關問題