下午大部分时间我都在与之斗争，找不到解决问题的方法。我更改了一些.asp页面，以反映我们添加到网站的新页面，添加到菜单后，我决定重新对齐文本。我删除了padding-left: 140px CSS，并将其替换为text-align: center;
这导致导航菜单变得异常（pic2）。然而，我把CSS文件改回了原来的版本，在IE和Chrome中，它仍然显示得很奇怪，但在Firefox中，它运行得很好。这是代码，根据我觉得相关的内容进行了调整。如果需要的话，我可以把它全部张贴出来。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Description" content="CompanyName CompanyProduct">
<title>CompanyName CompanyProduct</title>
<link rel="stylesheet" type="text/css" href="_style.css" media="screen">
<!-- Use after inserting the tabs above navigation bar
<script src="_tabrollover.js" type="text/javascript">
</script>
-->
<style type="text/css">
<!--
body,td,th {
font-family: Tahoma,Arial,Helvetica,sans-serif;
}
-->
</style>
<link href="/_toolbox/_green_button_rollover.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main_container">
<div id="header">
<!--#include virtual="/_ssi/header.asp" -->
<div id="menu">
<ul>
<li><a class="current">Home</a></li>
<li><a href="/why.asp">Why CompanyProduct?</a></li>
<li><a href="/features/index.asp">Features</a></li>
<li><a href="/services.asp">Services</a></li>
<li><a href="/pricing.asp">Pricing</a></li>
<li><a href="/resources.asp">Resources</a></li>
<li><a href="/helpx/faqx.asp">FAQ</a></li>
<li><a href="/contact/index.asp">Contact Us</a></li>
</ul>
</div>
</div>
<div class="green_box">
<div class="clock"></div>
<div class="text_content">
<h1><a href="/features/index.asp">Power of<br>
stuff</a></h1>
</div>
<!--begin div for right nav w rollovers, listing top 5 features-->
<!--#include virtual="/_ssi/div_right_nav.asp" -->
<!--end div for right nav w rollovers, listing top 5 features-->
其余部分：
body {
background-color:#D7DFE2;
margin:0px;
padding:0px;
color:#416271;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
}
h1{
padding:5px 0 5px 0;
margin:0px;
font-size:22px;
color:#000004;
font-family: Tahoma, Arial, Helvetica, sans-serif;
text-align: left;
}
h3{
padding:0 0 5px 0;
margin:0px;
font-size:12px;
color:#3898ac;
}
#main_container{
height:auto;
margin:auto;
background-color:#FFFFFF;
width: 900px;
}
#header{
width:900px;
height:auto;
margin:auto;
}
#menu{
width:900px;
height:32px;
padding:0px;
background-color:#416271;
clear: both;
}
#menu ul{
list-style:none;
margin: auto;
display:block;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 140px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}
#menu ul li{
list-style:none;
display:inline;
float:left;
width:auto;
height:32px;
padding:0px;
line-height:31px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight: bold;
}
#menu ul li a{
height:32px;
width: auto;
float:left;
text-decoration:none;
padding:0 0 0 25px;
margin:0px 3px 0px 3px;
color:#fff;
text-align:center;
position: static;
}
#menu ul li a:hover{
height:31px;
width: auto;
text-decoration:none;
color: #fff;
background:url(images/menu_arrow.gif) no-repeat left;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
}
#menu ul li a.current{
height:32px;
width: auto;
float:left;
text-decoration:none;
color: #fff;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
background-image: url(images/menu_arrow.gif);
background-repeat: no-repeat;
background-position: left;
}
它应该是什么样子（在FF中看起来像这样）：图1http://itsza.ch/pic1.png
它目前的外观（在IE和Chrome中）：pic2http://itsza.ch/pic2.png
将此作为顶部菜单的基础，li是块，因此不需要使它们内联。
CSS：
#menu ul li {
list-style:none;
float:left;
}
.clear {
clear:both;
}
HTML:
<div id="menu">
<ul>
<li><a href="...">...</a>
</ul>
<div class="clear"></div>
</div>
你还有一堆多余的规则，试着删除它们，这样更容易维护和阅读。例如，以下规则
#menu ul li a.current {
height:32px;
width: auto;
float:left;
text-decoration:none;
color: #fff;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
background-image: url(images/menu_arrow.gif);
background-repeat: no-repeat;
background-position: left;
}
相当于这个
#menu ul li a.current {
background:url(images/menu_arrow.gif) left no-repeat;
}
这是因为您刚刚重做了#menu ul li 上已经存在的规则
对于基于列表的菜单：
- 浮动您的
LI，而不是A-标签 - 在
A标签上使用display:block - 别忘了清理你的花车
请参阅我的教程：我喜欢列表