0
我一直在从事空闲时间从头开始编写个人网站，并且已经获得了大部分看起来像我想要的布局。但在我的生活中，我无法弄清楚为什么Firefox不会将“下拉菜单项”（'about'，'blog'等）对齐到深灰色区域，就像它在Safari中所做的那样。定位背景图片和Firefox
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}
对不起乱码。如果任何人都可以阐明这个问题可能会在这里，但那会很棒。谢谢！
如果您可以将您的代码放在网上，我们可以帮助您进行调试...... – pleasedontbelong 2010-09-24 23:01:12
标准模式DOCTYPE对于限制浏览器差异也很重要。 – bobince 2010-09-24 23:31:02
pleasedontbelong：web.pdx.edu/~jstraus/（注意下拉项目在背景图片上而不是在下面：P）谢谢！ – 2010-09-25 02:33:24