背景並不總是適用於身體

我遇到了一個可能的CSS /瀏覽器錯誤，我無法弄清楚。簡單地說，我有以下的情況下設置：背景並不總是適用於身體

.my-class { 
 
    background: #66c28f; /* Old browsers */ 
 
    background: -moz-linear-gradient(left, #66c28f 0%, #0e9498 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(left, #66c28f 0%,#0e9498 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to right, #66c28f 0%,#0e9498 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66c28f', endColorstr='#0e9498',GradientType=1); /* IE6-9 */ 
 
}

<body class="my-class"> 
 
</body>

正如你所看到的，有多重背景屬性添加了向後兼容的目的。問題是，當我定義了多個背景時，有時什麼也沒有顯示。我會每3次加載一次我的頁面，但不顯示背景。這似乎是全部或沒有。然而，第二個我調整頁面大小，或選擇正文並在開發人員工具中打開和關閉背景色，顏色立即顯示（是的，樣式顯示爲在開發人員工具中正常工作 - 請參見下面的截圖）。我在測試中使用了最新的穩定版Chrome。

我相當肯定它不是身體沒有100％身高或類似的問題。樣式表也是頭部中的最後一個樣式表。當我刪除除一個背景屬性以外的所有內容時，它會在100％的時間內運行。

任何想法，爲什麼這會發生在現代瀏覽器？我不允許提供備用背景樣式嗎？

下面的屏幕截圖顯示了當顯示背景爲而不是（但似乎在開發工具中正常工作）時的開發人員工具結果。

注：這似乎是一個類似的問題，因爲這2009年之後，但沒有給出解釋：background color doesn't always show up

來源

2016-09-20 Swquenzer

我的瀏覽器是最新的Chrome瀏覽器 - 我似乎沒有這個問題... – kukkuz

一旦我有這個問題，但嘗試給height:100%你<body>和<html>或有時嘗試min-height:100%到您的<body>。在這種情況下，用下面的CSS代碼再試一次：

html, .my-class { 
    height: 100%; 
    background: #66c28f; /* Old browsers */ 
    background: -moz-linear-gradient(left, #66c28f 0%, #0e9498 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(left, #66c28f 0%,#0e9498 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to right, #66c28f 0%,#0e9498 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66c28f', endColorstr='#0e9498',GradientType=1); /* IE6-9 */ 
}

檢查這個question更多地瞭解這個問題。

來源

2016-09-21 01:07:06 MuhammadJ

非常有趣 - 添加相同的樣式到html以及body標籤（即.my-class）的竅門。從您的鏈接中，問題似乎出現在幾個瀏覽器中，但行爲從未完全一致。無論如何，感謝您的解決方案。 – Swquenzer

@Swquenzer這是正確的，跨瀏覽器的問題和不同的行爲。 – MuhammadJ

背景並不總是適用於身體

回答

相關問題