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

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中不确定这是否是重要信息，但我还在另一个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 个解决方案

解决方案1
2 已采纳 2011-04-05 02:34:35

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2011-04-05 02:34:35

解决方案1
2 已采纳 2011-04-05 02:34:35