【发布时间】：2010-09-25 21:54:34
【问题描述】：
我一直在空闲时间从头开始编写个人网站，并且已经得到了大部分看起来像我想要的布局。但是对于我的生活，我无法弄清楚为什么 Firefox 没有像在 Safari 中那样将背景图像下方的“下拉菜单项”（“关于”、“博客”等）对齐到深灰色区域。
HTML 页面（不包括下拉菜单 javascript）：
<html lang="en">
<head>
<title>The Hominis Inquiry</title>
<link href="hominquiry.css" rel="stylesheet" type="text/css">
<script language="javascript" src="hominquiry.js" type="text/javascript"></script>
</head>
<!--<script type="text/javascript">
/*
function toggleSound()
{if (button.checked)
{sound=true}
else
{sound=false}}
*/
</script> -->
<body onload="folded()">
<h1>
<div class="title">
<img src="leftbmk.jpg" height="30%" width="15%" align="left" />
<img src="rightbmk.jpg" height="30%" width="15%" align="right" />
<a href="index.htm" target="_top" onmmouseover="hominis_define()" title="Return to Homepage">
<span class="title">The Hominis Inquiry</span><br/>
A Perpetually Inchoate Exegesis about Ourselves
</a>
</div>
</h1>
<h2>
<div class="about" id="about" onmouseover="unfold('about')" onmouseout="fold('about')">
<a href="about.htm" >
About
</a>
<ul>
<li><a href="about.htm#site" class="underline">The Site</a></li>
<li><a href="about.htm#" class="underline">More Schpiel</a></li>
<li><a href="about.htm#issues" class="underline">Preamble on Social Issues</a></li>
<li><a href="about.htm#author" class="underline">The Author</a></li>
<li><a href="about.htm#source">Open Source Projects</a></li>
</ul>
</div>
<div class="blog" id="blog" onmouseover="unfold('blog')" onmouseout="fold('blog')">
<a href="blog.htm">
Blog
</a>
<ul>
<li><a href="blog.htm#recent" class="underline">Current</a></li>
<li><a href="blog.htm" class="underline">Search by Date</a></li>
<li><a href="blog.htm" class="underline">Search by Topic</a></li>
<li><a href="blog.htm" class="underline">Search by Blogger</a></li>
<li><a href="blog.htm">All Blogs</a></li>
</ul>
</div>
<div class="research" id="research" onmouseover="unfold('research')" onmouseout="fold('research')">
<a href="lab.htm">
Academic Research/ <br/> Papers
</a>
<ul>
<li><a href="research.htm#recent" class="underline">Epistemology</a></li>
<li><a href="research.htm#" class="underline">Research</a></li>
<li><a href="research.htm#" class="underline">Essays</a></li>
<li><a href="research.htm#" class="underline">Computer Simulation</a></li>
<li><a href="research.htm#">More Fun Stuff</a></li>
</ul>
</div>
<div class="hypercourse" id="hypercourse" onmouseover="unfold('hypercourse')" onmouseout="fold('hypercourse')">
<a href="hypercourse.htm">
Hyper-Courses <br/> On Demand
</a>
<ul>
<li><a href="hypercourse/physics.htm" class="underline">Physics (Algebra-Based)</a></li>
<li><a href="hypercourse/diffeq.htm#" class="underline">Differential Equations</a></li>
<li><a href="hypercourse.htm#" class="underline">Other University Studies</a></li>
<li><a href="hypercourse.htm#" class="underline">Discussions/Suggestions</a></li>
</ul>
</div>
<div class="links" id="links" onmouseover="unfold('links')" onmouseout="fold('links')">
<a href ="links.htm">
Other Arbitrarily <br/> Awesome Links
</a>
<ul>
<li><a href="links.htm">Me being Chopped Liver</a></li>
</ul>
</div>
<div class="contact" id="contact" onmouseover="unfold('contact')" onmouseout="fold('contact')">
<form id="startsearch">
<a href>
Contact
</a> <br/><br/><br/>
<input type="text" id="sbox" size="15" value="(under rennovation)">
<input type="button" id="sbutt" value="Find"
</form>
</div>
</h2>
<table border="2" cellpadding="3" cellspacing="3" align="center" valign="center">
<tr><image src="about.jpg"></tr> <tr><image src="blog.jpg"></tr></td>
<tr><image src="issues.jpg"></tr> <tr><image src="mybooks.jpg"></tr></td>
</table>
<div class="hiportal" id="hiportal">
<p>
Welcome to the HIportal
UPDATES<br/><br/>
<u>(4/1/10) - Site Launched</u>:<br/>
This is not an April Fools' joke... well maybe somewhat. Because of my lofty ambition to write this website from scratch,
the pages are currently, not the prettiest. Feedback from viewers will definitely be crucial throughout the development
of this page; though it may be better to hold on to the comments until I get the site up to more functional scale (forseeing
how radically things will change during that process). I think I really just wanted the gratification of getting a site up
to public view (wooOOOo!). Right now, the main features really are a draft of the 'about' page and a largely incomplete
chapter 2 of my physics e-book for high school students. Keep checking back for updates, of which there will be many these upcoming
few weeks...<br/>
Goals in sight: Keep this page alive, Upload fuller versions of ebook chapters 2-3
Long-term Technical: Implement a wiki engine to allow additions of news events by registered users
</p>
</div>
Trouble reading this site? Download the latest version of your preferred browser below...
</body>
</html>
这是 CSS：
body {background-color:#606060; color:white}
h1 {background-color:#606060; color:white; background-image:url(hicon_beta.jpg); font-size:100%; text-align:center; font-weight:700; text-decoration:none; font-family:Verdana}
h2 {color:#0000A0; background-color:#FFCCCC; font-size:200%; text-align:center; font-style:italic; font-weight:700; font-family: MS Gothic}
h3 {color:black; background-color:#DDDDDD}
div.title {position:absolute; left:0%; width:100%; text-align:center; background-image:url(hicon_beta.jpg); cursor:help}
span.title {color:maroon; font-size:300%; font-weight:900; font-family:papyrus; text-align:center}
div.about {position:absolute; top:31.2%; bottom:34%; left:5%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.blog {position:absolute; top:31.2%; bottom:34%; left:21%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.research {position:absolute; top:31.2%; bottom:34%; left:37%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.hypercourse {position:absolute; top:31.2%; bottom:34%; left:53%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.links {position:absolute; top:31.2%; bottom:34%; left:69%; width:15%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.contact {position:absolute; top:31.2%; bottom:34%; left:85%; width:10%; color:red; font-size:50%; text-align:center; z-index:1; overflow:hidden}
div.hiportal {position:absolute; top:35%; bottom:100%; left:10%; width:80%; background-color:silver}
p {background-color:silver; color:#220088; font-weight:500; text-align:left}
a:link {text-decoration:none; color:red}
a:visited {text-decoration:none; color:red}
a:hover {background-color:#FFFFDD; text-decoration:none}
dropdown.menu {background-color:#606060; color:#FFFFDD}
抱歉，代码混乱。如果有人可以阐明这里可能存在的问题，那就太棒了。谢谢！
【问题讨论】：
-
如果您能将您的代码放到网上以便我们调试它，我会非常有帮助...
-
标准模式 DOCTYPE 对于限制浏览器差异也是必不可少的。
-
pleasedontbelong: web.pdx.edu/~jstraus/ （注意下拉项目在背景图片上，而不是在它下面：P）谢谢！
-
您似乎有很多问题需要清理。您并没有真正正确使用标题标签，它们适用于文本和文本流项目，而不是代码块容器。您还使用绝对定位而不定义父容器定位。在这种情况下，您看起来并不需要绝对定位。查看 w3schools.com 以获取更多最新的 HTML 和 CSS 教程。您还应该通过像 validator.w3.org 这样的验证器来运行您的页面，以帮助您找到问题。
-
当您使用它时，我也不建议使用框架。您可以在不使用框架的情况下完成同样的事情。我还注意到您正在使用百分比设置标题中图像的高度和宽度，随着浏览器窗口大小的改变，您的纵横比会被杀死。尝试调整浏览器的大小，你会明白我的意思。
标签： html css firefox positioning background-image