我的代码已通过 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;
}
最佳答案
欢迎来到现实世界。
IE 和 Firefoy 对 CSS 的解释各不相同。这一直是个问题，而且永远都是!如果你想减少不同的行为或外观，你可以尝试使用所谓的 CSS 重置。
什么是 css 重置？
这是一个简单的 css 文件，它将每个定位、填充、边距以及浏览器默认情况下的所有内容重置为零。因此，您可以确保您的大部分样式将被相同地解释。当然它不会总是一样的，但它可以帮助你把它放在正确的方向上。您还可以使用 GridLayouts 进行定位，这也是一个很棒的工具，在大多数浏览器中的工作和外观都一样。
只是一个提示，用 opera、chrome、旧版本的 IE、safari 打开它，你会惊讶地发现它看起来也不同 ;-)
关于html - 为什么我的 CSS + HTML 网页在 IE 和 FireFox 中显示不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9825618/