為什么我的CSS + HTML網頁在IE和FireFox中顯示不同？

Question

我的代碼已通過w3school驗證，但在IE和firefox中仍然顯示不同。

頂部的我的鏈接欄似乎在IE中向下層疊，但是在Firefox中以實線顯示（應該是）！！！

我的HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<link rel="stylesheet" type="text/css" href="lbf.css">

<title>Love British Film</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<div id="main_container">fegerfg

    <div id="header">
    <div class="logo">Love British Film.com </div>  
    </div>
    <div class="nav_bar">
        <ul class="nav_list">

        <li class="odd"><a href="index.html">Home</a></li>
        <li class="even"><a href="index.html">Reviews</a></li>
        <li class="odd"><a href="index.html">Forums</a></li>
        <li class="even"><a href="index.html">Videos</a></li>
        <li class="odd"><a href="index.html" >Downloads</a></li>
        <li class="even"><a href="index.html">News</a></li>
        <li class="odd"><a href="index.html" >Fun bits</a></li>
        <li class="even"><a href="index.html">Contact us</a></li>
        </ul>   
    </div>




        <div class="main_text">
        <div class="header">HEADER FOR MAIN CONTENT</div>


        Main content!!
        </div>

        <div id="film_of_day">Film of day </div>




        <div id="poll_of_week">asdnasdljasasdasfdasfasfas</div>




</div>
</body>
</html>

還有我的CSS代碼

body
{
background:url(bg.jpg) no-repeat #FFF center top;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin:0px auto auto auto;

}

div {
margin: 0px;
padding: 0px;
width: 0px;
}

#main_container{
width:1200px;
height:auto;
margin:auto;
padding:0px;
}
#header{
position:relative;
width:1200px;
height:170px;
background:url(header.jpg) no-repeat center;
background-position:0px 0px;
margin:auto;
padding:5px;
}
.logo{
width:auto;
height:auto;
font-size:20px;
position:relative;
top:80%;  
text-align:right;
}
.nav_bar{
width:1200px;
height:50px;


}
ul.nav_list{
list-style-type:none; float:left; display:block; width:1200px; 
margin:0px; padding:0px;
}

ul.nav_list li.odd a{
display:block;width:150px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left; 
background-color:rgb(147,216,255);height:40px; line-height:40px; color:rgb(168,100,63);
}
ul.nav_list li.even a{
display:block;width:150px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left; color:rgb(168,100,63);
height:40px; line-height:40px;background-color:rgb(26,142,165);
}
a.odd:link, a.odd:visited {
display:block;width:133px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left; }
ul.nav_list li.even a:hover{background-color:#A29;}
ul.nav_list li.odd a:hover{background-color:#F99;}

a.even:link, a.even:visited {
display:block;width:133px; text-align:center; float:left;height:40px;text-decoration:none; background:url(images/home.png) no-repeat left; color:#676d77;}
a.even:hover{
color:#FFFFFF;
}



.header{
width:500px;
text-align:center;
margin-bottom:50px;
}
.main_text{
display:inline-block;
float:left;
width:600px;
height:600px;
background-color:rgb(147,216,255);
}

#film_of_day{
float:right;
width:340px;
height:250px;
background-color:rgb(147,216,255);

}


#poll_of_week{
margin-top:50px;
float:right;
width:280px;
height:250px;
outline:solid;
padding:1px; 
}

Answer 1

歡迎來到真實的世界。
IE和Firefoy解釋CSS彼此不同。 這始終是一個問題，而且永遠都是！ 如果要減少其他行為或外觀，可以嘗試使用所謂的CSS重置。

什么是CSS重置？
這是一個簡單的css文件，它將所有定位，填充，邊距重置，默認情況下從瀏覽器重置為零。 因此，您可以確保對大多數樣式進行相同的解釋。 當然，它始終不會相同，但是可以幫助您將其指向正確的方向。 您也可以使用GridLayouts進行定位，這也是一個很棒的工具，在大多數瀏覽器中都可以正常工作。

http://meyerweb.com/eric/tools/css/reset/
http://960.gs/

提示一下，用Opera，chrome，IE的舊版本，野生動物園打開它，您會驚訝的是它看起來也很不同;-)

Answer 2

你是浮動的a標記您的內li的標簽這是不好的做法，造成你的問題。

你應該浮動的li標簽，並留下您的a標簽未漂內的鏈接

請參閱： http ： //jsfiddle.net/ZmhzA/1/

為什么我的CSS + HTML網頁在IE和FireFox中顯示不同？

問題描述

2 個解決方案

解決方案1
7 2012-03-22 15:41:10

解決方案2
3 已采納 2012-03-22 15:50:14

為什么我的CSS + HTML網頁在IE和FireFox中顯示不同？

問題描述

2 個解決方案

解決方案1 7 2012-03-22 15:41:10

解決方案2 3 已采納 2012-03-22 15:50:14

解決方案1
7 2012-03-22 15:41:10

解決方案2
3 已采納 2012-03-22 15:50:14