我正在开发一个新项目，看来opera和IE都为我的li元素提供了额外的空间。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
@import "stil.css";
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="reel.js"></script>
<script type="text/javascript" src="dropdown.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Savic</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<p> Samostalna Zanatska Radnja</p>
<a id="logo" href="index.html">Savić</a>
<div id="darrow">
</div>
<div id="darrow2">
</div>
<ul id="nav">
<li><a class="link" style="background:url(images/activeb.jpg) repeat-x" href="#">Početna</a></li>
<li><a class="link" id="izb" href="#">Izrada</a></li>
<li><a class="link" id="ugb" href="#">Ugradnja</a></li>
<li><a class="link" href="#">Galerija</a></li>
<li><a class="link" href="#">Kontakt</a></li>
</ul>
<ul id="izd">
<li><a href="#">Ograda</a></li>
<li><a href="#">Kapija</a></li>
<li><a href="#">Gelendera</a></li>
<li><a href="#">Čelične konstrukcije</a></li>
<li><a href="#">Garažnih vrata</a></li>
</ul>
<ul id="ugd">
<li><a href="#">Kupatila</a></li>
<li><a href="#">Vodovoda</a></li>
<li><a href="#">Kanalizacije</a></li>
<li><a href="#">Grejanja</a></li>
<li><a href="#">Servis pumpi za vodu</a></li>
</ul>
</div>
</div>
<div id="body">
<!-- ALL STUFF GOES HERE -->
<div id="holder">
<!-- LEVI DIV -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="left">
<div id="portfolio_cycler" class="shadow roundbox">
<img class="active" src="images/reel1.jpg" />
</div>
<div id="circles"></div>
<img id="horg" src="images/horg.jpg" />
<div id="topt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque semper ligula at volutpat. In hac habitasse platea dictumst. Nam ultrices diam eu dolor cursus in semper ligula faucibus. Nulla mattis tortor vel nunc rutrum convallis. Maecenas egestas diam sit amet odio mattis sit amet pellentesque orci bibendum. Ut sodales fringilla sem, nec volutpat mi scelerisque non. Phasellus luctus laoreet nunc, eget tincidunt massa egestas vel. Phasellus id sapien ante. Fusce vulputate, urna quis condimentum molestie, erat sapien porttitor dui, eu pulvinar orci enim non massa. Mauris in cursus mauris. Sed tortor justo, placerat tristique blandit at, rutrum quis nisi.</p>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- LEVI DIV KRAJ -->
</div>
<!-- ALL STUFF ENDS HERE -->
</div>
<div id="footer"></div>
</div>
</body>
</html>
CSS：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/*NEOPHODNO ZA FOOTER */
/*<div id="container">
<div id="header">
<div id="menu">
</div>
</div>
<div id="body">
Sve stavljati u body, kao i margin: 0 auto, ne treba wrap div
</div>
<div id="footer"></div>
</div>
*/
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:url(images/background.jpg) repeat-x;
height:100px;
}
#body {
width:980px;
margin:0 auto;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:25px; /* Height of the footer */
background:url(images/footer.jpg) repeat-x;
}
#wrap{
width:980px;
margin:0 auto;
background:#000;
height:100px;
}
/* FOOTER PODESAVANJA */
#menu{
width:980px;
margin:0 auto;
position:relative;
top:2px;
height:98px;
background:url(images/header2.jpg) 0px 0px;
}
#holder{
width:960px;
position:relative;
left:10px;
top:10px;
}
#menu p,a,li{
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-weight:bold;
position:relative;
}
#menu p{
font-size:12px;
left:55px;
top:10px;
width:200px;
}
#logo{
font-size:40px;
top:5px;
left:80px;
text-decoration:none;
}
#nav li{
font-size:12px;
display:inline;
}
#nav ul{
position:relative;
height:20px;
}
#nav{
position:relative;
top:10px;
left:0px;
}
#nav a{
font-size:12px;
padding-right:14px;
padding-left:14px;
}
.link{
padding-top:5px;
padding-bottom:5px;
text-decoration:none;
top:1px;
}
#portfolio_cycler{position:relative;}
#portfolio_cycler img{position:absolute;z-index:1}
#portfolio_cycler img.active{z-index:3}
#circles{
position:absolute;
z-index:7;
top:250px;
left:690px;
}
#izd{
width:130px;
background:#48a9c4;
position:absolute;
z-index:5;
font-size:12px;
text-align:center;
top:98px;
left:60px;
height:120px;
}
#ugd{
width:130px;
background:#48a9c4;
position:absolute;
z-index:5;
font-size:12px;
text-align:center;
top:98px;
left:146px;
height:120px;
}
#izd li, #ugd li{
list-style:none;
padding-top:3px;
padding-bottom:5px;
}
#izd a, #ugd a{
text-decoration:none;
display:block;
width:130px;
}
#izb{
visibility:visible;
}
#darrow{
position:absolute;
left:130px;
top:80px;
background:url(images/darrow.png) no-repeat;
width:10px;
height:12px;
z-index:5;
}
#darrow2{
position:absolute;
left:214px;
top:80px;
background:url(images/darrow.png) no-repeat;
width:10px;
height:12px;
z-index:5;
}
#horg{
position:relative;
top:277px;
}
#topt{
position:relative;
width:770px;
top:283px;
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
我不想创建特殊的CSS或使用javascript来解决这个问题，所以任何人都可以告诉我这是什么问题。我认为id nav会导致问题，但我不确定。
答案 0 :(得分：1)
问题在于您的CSS。尝试添加以下内容：
#nav {
margin: 0;
padding: 0;
}
#nav li {
/* use this instead of display:inline */
float: left;
display: block;
}
这些只是对我可以很快发现的错误的一些修复。可能会有更多错误。如果您想学习如何使用CSS创建水平菜单，请查看我在Cramie.net - Create CSS Horizontal Menu
上的教程