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

來源

2012-03-13 user1059110

在我看來就像你可能有在你的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李存剛重做規則

來源

2012-03-13 22:07:14

對於基於列表的菜單：

浮法你LI，不是你A - 標籤上
使用display:block您A -tag
不要忘了清除浮動。

看我教程：I love Lists

來源

2012-03-13 21:55:43

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

回答

相關問題