DIV 背景图像在 Firefox 和 Chrome 中不显示
我遇到一个奇怪的问题，我的 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 & 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'图像未显示在使用类area的第一个DIV中 不确定这是否是重要信息，但我还在另一个调用不同背景图像的 DIV 上应用了 area 类，并且该背景图像在所有 IE、Firefox 和 Chrome 上都能正常显示。我尝试从第一个 DIV 中删除 position:relative 和/或 transparent 但问题仍然出现。
我还在 http://validator.w3.org/ 验证了我的文件，并且通过了，所以现在我真的很困惑可能是什么原因造成的。我真的希望 Stackoverflow 上的任何好心人都可以帮助我解决这个问题。
谢谢。
I'm having a strange problem where my DIV background is not displayed in Firefox and Chrome, but appears perfectly fine in IE. Upon searching on Stackoverflow, I found several similar questions but none of the solutions worked for me unfortunately.
I read in a forum that it might have something to do with browser caching or that I'm using Windows XP. I believe browser caching isn't the problem in my case considering I'm testing my page offline, and the only online testing I've done was right after I uploaded the files. I haven't had the chance to check it on a different Windows platform (e.g. Vista), but even if this problem doesn't occur on Vista, naturally I would like my background image to appear across all platforms.
Please find below, my CSS and source code:
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;
}
Source Code
<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 & 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>
The Problem
My 'header.png' image is not displayed in the first DIV that uses class area
Not sure if this is vital information, but I also apply the area class on another DIV calling a different background image, and that background image is displayed fine on all IE, Firefox and Chrome. I've tried removing position:relative and/or transparent from the first DIV but the problem still occurs.
I've also validated my file at http://validator.w3.org/ and I passed, so now I'm really stumped on what might have caused this. I really hope any kind soul on Stackoverflow could help me with this.
Thank you.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你的 CSS 有错误。由于您使用了简写，因此
top和center样式会混淆。把它们放在一起就可以了：top center no-repeatYour CSS has an error. Since you used shorthand, the
topandcenterstyles are confused. Put them together and it will be fine:top center no-repeat