div背景圖片在Chrome中無法正常顯示

我正在幫助設計師朋友提供有問題的頁面，並且它也將我扔了一段循環。整個頁面應該有4個div，並帶有背景圖片和文字。該頁面按照預期在IE和FF中顯示，但在Chrome中只顯示加載時可見的div顯示它的背景圖像。此外，如果突出顯示應該佔用的空間，其他人將顯示。div背景圖片在Chrome中無法正常顯示

我創建的頁面的版本洗滌，例如：http://furrylogic.net/playground/rose/example.html

任何反饋或建議，將不勝感激。謝謝！

來源

2014-01-06 furryLogic

似乎它只是花費了太多的時間加載。如果你檢查它顯示的元素 –

我認爲這將是糟糕的標記。

與<div id="hope">例子：

目前

<div id="hope"> 
    <div class="hinside"> 
     <center> 
      <p></p> 
      <h1 style="color: rgb(255, 255, 255); text-transform: uppercase; opacity: 1;" data- sb="fadeInDown" class="sb-effect-displayed animated fadeInDown">You are Loved!</h1> 
      <p>&nbsp;</p> 
      <p></p> 
     </center> 
    </div> 
</div>

可以簡化爲：

HTML

<div id="hope" class="banner-image"> 
    <h1 data-sb="fadeInDown" class="sb-effect-displayed animated fadeInDown">You are Loved!</h1> 
</div>

CSS

.banner-image { 
    width: 100%; 
    margin: 20px 0; 
    padding: 0; 
} 
.banner-image h1 { 
    text-align: center; 
    margin: 80px 0; 
    padding: 0; 
    text-transform: uppercase; 
    color: #fff; 
}

這只是讓你在正確的軌道上，注意我已刪除從<h1>空<p>標籤和填充。如果您提供JsFiddle，我可以舉一個工作示例。

來源

2014-01-06 17:01:51 AfromanJ

另一個答案確實解決了這個問題，但我也會傳達你的建議以進一步改進。謝謝！ – furryLogic

如果我們可以用更少，更乾淨的代碼行實現相同的輸出，我們應該始終如此。使用太多的div和不想要的風格只是沒有意義。即使調試也變得更加困難。傑米閱讀已經向我們展示了我推薦的更清潔的方法:) – Morven

刪除背景附件：固定來自所有這些id，即#time，#bible，#hand和#hope。如果這不起作用，請讓我知道。 :)

來源

2014-01-06 17:09:15 Morven

這樣做。非常感謝！ – furryLogic

歡迎您:) – Morven

您確定這是設計師想要的嗎？看着他希望他們被修復的主頁（所以他們在滾動時呆在一個地方）。問題是如何在這種情況下解決它，我認爲第一個答案將是一個好的開始。中心是html中最古怪的標籤之一，並導致很多問題。 –

更改<h1></h1>標記爲<h1><font id="h1"></font></h1>標記與樣式或css在#h1。由於某些奇怪的原因，某些瀏覽器不會正確顯示字體標籤有時會消除的p和h1標籤。此外，我會建議使用字體而不是p來消除某些瀏覽器放入的換行符。

來源

2016-03-28 17:01:22 Puffinlump

div背景圖片在Chrome中無法正常顯示

回答

相關問題