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

问题描述：

我一直在争取在下午的较好的一部分时间，无法找到我正在使用的解决方案。我正在更改一些.asp页面以反映我们添加到网站的新页面，并且在添加到菜单后，我决定重新对齐文本。我删除了padding-left: 140px CSS并将其替换为text-align: center;HTML/CSS：在FF中工作，但不在Chrome或IE中工作

这导致导航菜单全部扭曲（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语法错误。 – Sparky 2012-03-13 22:12:03

更新到这个：虽然CSS和HTML是可怕的（不是我写的），但问题是服务器端缓存。我觉得自己像个小丑。 – user1059110 2012-03-18 15:41:39

答

以此为顶部的菜单基地，李时珍是块，所以你不需要让他们在线。

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，不是你A - 标签上
使用display:block您A -tag
不要忘了清除浮动。

看我教程：I love Lists

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

相关推荐