在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背景图片

回答

相关问题