HTML/CSS：在 FF 中工作，但不在 Chrome 或 IE 中答案

【问题标题】：HTML/CSS: Working in FF but not in Chrome or IEHTML/CSS：在 FF 中工作，但不在 Chrome 或 IE 中
【发布时间】：2012-03-14 06:07:14
【问题描述】：

下午的大部分时间我都在与这个问题作斗争，但找不到解决我正在处理的问题的方法。我正在更改一些 .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 中看起来像这样）：pic1 http://itsza.ch/pic1.png

目前的外观（在 IE 和 Chrome 中）：pic2 http://itsza.ch/pic2.png

【问题讨论】：

在我看来，您的 CSS 中可能存在语法错误。
更新到这个：虽然 CSS 和 HTML 很糟糕（不是我写的），但问题是服务器端缓存。我觉得自己像个小丑。

标签： html css internet-explorer google-chrome asp-classic

【解决方案1】：

将此作为顶部菜单的基础，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 上已经存在的规则

【讨论】：

【解决方案2】：

对于基于列表的菜单：

浮动你的LI，而不是你的A-tag
在您的A标签上使用display:block
别忘了清理你的花车。

看我的教程：I love Lists

【讨论】：