在Firefox和Chrome中不顯示DIV背景圖片

我遇到一個奇怪的問題，我的DIV背景在Firefox和Chrome中不顯示，但在IE中顯示完美。在Stackoverflow上搜索時，我發現了幾個類似的問題，但不幸的是，這些解決方案都不適合我。在Firefox和Chrome中不顯示DIV背景圖片

我在論壇上看到，它可能與瀏覽器緩存或我使用Windows XP有關。考慮到我正在離線測試我的頁面，我認爲瀏覽器緩存不是我的情況中的問題，我上傳文件後，我所做的唯一一項在線測試就是正確的。我沒有機會在不同的Windows平臺（例如Vista）上檢查它，但即使在Vista上沒有發生此問題，我也希望我的背景圖像能夠出現在所有平臺上。

請在下面找到，我的CSS和源代碼：

CSS

body { 
margin: 0px; 
background:url(../images/bground.jpg) fixed bottom; 
} 

.area { 
width:738px; 
margin:0 auto; 
padding:0 131px; 
} 

#menu { 
width:738px; 
height:41px; 
position:absolute; 
top:273px; 
text-align: left; 
} 

#navlist li { 
display: inline; 
list-style-type: none; 
padding: 0 20px 0 0; 
} 

#sec-menu { 
height:41px; 
position:absolute; 
right:131px; 
top:50px; 
text-align: right; 
border-bottom:1px solid #bbb 
} 

#sec-navlist li { 
display: inline; 
list-style-type: none; 
padding: 0 0 0 10px; 
} 

#register { 
position:absolute; 
right:131px; 
top: 110px; 
} 

#content { 
width:1000px; 
position:absolute; 
top:273px; 
text-align: center; 
}

源代碼

<body onload="MM_preloadImages('images/register-over.png')"> 

<div class="area" style="height:343px; background:transparent url('images/header.png') top no-repeat center; position:relative"> 

<div id="sec-menu"> 
<ul id="sec-navlist"> 
    <li><a href="#" class="sec-menu">International Faculty</a></li> 
    <li><a href="#" class="sec-menu">Contact</a></li> 
    <li><a href="#" class="sec-menu">Sitemap</a></li> 
</ul> 
    </div> 

<a href="#"><img src="images/register.png" alt="Register for KLVS 2011 Now!" width="91" height="89" id="register" onmouseover="MM_swapImage('register','','images/register-over.png',1)" onmouseout="MM_swapImgRestore()" /></a> 

<div id="menu"> 
    <ul id="navlist"> 
    <li class="menu-active">Home</li> 
    <li><a href="#" class="menu">About KLVS 2011</a></li> 
    <li><a href="#" class="menu">Programmes</a></li> 
    <li><a href="#" class="menu">Accommodation</a></li> 
    <li><a href="#" class="menu">Exhibitors &amp; Sponsors</a></li> 
    <li><a href="#" class="menu">Call for Abstract</a></li> 
</ul> 
</div>

<div class="area" style="background:url(images/transparent-white_12.png) repeat-y"><br /> 
</div>

的問題

圖像沒有在第一DIV顯示我的「header.png」使用類區域不知道這是至關重要的信息，但我也套用區域在另一個DIV上調用另一個背景圖像，並且該背景圖像在所有IE，Firefox和Chrome上均可正常顯示。我嘗試從第一個DIV中刪除position:relative和/或transparent，但問題仍然存在。

我也在http://validator.w3.org/驗證了我的文件，我通過了，所以現在我真的很難爲可能造成這種情況。我真的希望Stackoverflow的任何靈魂都能幫助我。

謝謝。

來源

2011-04-05 Hasanah

可能是一個路徑問題的。如果將網址更改爲「../images/header.png」，會發生什麼情況？ – 2011-04-05 02:32:41

您的CSS有錯誤。由於您使用了簡寫形式，因此top和center樣式很混亂。把它們放在一起，這將是罰款：

<div class="area" style="height:343px; background:transparent url('images/header.png') top center no-repeat ; position:relative">

top center no-repeat

來源

2011-04-05 02:34:35 tcooc

謝謝，我在推特上分享了這個Q後幾分鐘，我的朋友也指出了速記。對未來的自我提醒很好。再次感謝！ – Hasanah 2011-04-05 02:36:22

在Firefox和Chrome中不顯示DIV背景圖片

回答

相關問題