Question

我遇到一个奇怪的问题，我的DIV背景没有在Firefox和Chrome中显示，但在IE中看起来非常好。在Stackoverflow上搜索时，我发现了几个类似的问题，但遗憾的是没有一个解决方案适合我。

我在一个论坛中读到它可能与浏览器缓存或我正在使用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>

问题

我的'header.png'图片未显示在使用类区域的第一个DIV中不确定这是否是至关重要的信息，但我还将 area 类应用于调用不同背景图像的另一个DIV，并且该背景图像在所有IE，Firefox和Chrome上都能正常显示。我尝试从第一个DIV中删除position:relative和/或transparent，但问题仍然存在。

我也在http://validator.w3.org/验证了我的文件并且我通过了，所以现在我真的很难过可能导致这种情况的原因。我真的希望Stackoverflow上任何善良的人都可以帮助我。

谢谢。

Answer 1

你的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

DIV背景图像未在Firefox和Chrome中显示

1 个答案: