我正在使用Firefox 3.0.9在我的网站上工作（并且使用CSS非常环保），到目前为止看起来很公平。不过我顶部有一个漂浮的水平导航栏，看起来就像是踩到了。以下是我到目前为止的尝试：
1）我调整了边距，将填充归零并改变了背景图像的宽度 - 一切都没有效果。
2）我试图创建一个IE7文件夹并用不同的样式表指向浏览器 - 没有效果。
3）我尝试使用IE7.js来解决问题 - 没有效果。
IE正在推动我的惨淡！有什么想法吗？这是我的CSS＆amp; HTML（不笑;-)）谢谢！
/ ---我的css --- /
#body {
margin: 0px 0px 20px 0px;
text-align: center;
background: #450000 url(images/greenstrip.jpg) repeat-x right top;
}
#maincontainer {
width: 720px;
border-width: 8px;
border-color: #fff;
border-style: solid;
position: absolute;
margin-left: 50%;
left: -360px;
margin-right: auto;
}
#box p {
position: absolute;
color: #fffceb;
width: 450px;
margin-top: 275px;
margin-left: 16px;
background: #373635;
font-size: medium;
font-family: "arial rounded mt bold", "times roman";
text-align: left;
line-height: 1.5em;
padding-left:7px;
padding-right:7px;
padding-bottom:7px;
border-style:solid;
border-color:#bec783;
border-width: 3px;
}
#lowerbox p {
position: absolute;
color: #fffceb;
width: 450px;
background: #373635;
font-size: medium;
font-family: "arial rounded mt bold", "times roman";
text-align: center;
line-height: 1.5em;
padding-left:7px;
padding-right:7px;
padding-bottom:7px;
border-style:solid;
border-color:#bec783;
border-width: 3px;
width: 450px;
margin-top: 433px;
margin-left: 16px;
}
#featured p {
position: absolute;
color: #000;
width: 270px;
margin-top: 825px;
margin-left: 128px;
background: none;
font-size: small;
font-family: "arial rounded mt bold", "times roman";
text-align: center;
line-height: 1.5em;
}
#customize p {
position: absolute;
color: #000;
width: 270px;
margin-top: 825px;
margin-left: 420px;
background: none;
font-size: small;
font-family: "arial rounded mt bold", "times roman";
text-align: center;
line-height: 1.5em;
}
.name {
font-weight: bold;
font-style: italic;
color: #bec783;
}
ul {
margin: 0px;
width: 680px;
line-height: 0em;
list-style: none;
font-size: medium;
font-family: "arial rounded mt bold", "times roman";
float: left;
background: url(images/button.gif);
}
ul a {
display: block;
padding: 0 1.2em;
line-height: 2.2em;
text-decoration: none;
color: #fff;
float: left;
margin-left: 6px;
margin-right: 0;
}
ul li {
float: left;
width: auto;
}
ul a:hover {
color:#f26214;
}
ul a:visited {
text-decoration: none;
}
#textpad ul {
position:absolute;
width:100px;
margin-top: 335px;
margin-left: 481px;
background: none;
text-decoration: none;
}
.promise a {
display: block;
color:#000;
line-height: 1em;
font-size: 30px;
font-family: "freestyle script";
width:150px;
}
.promise a:visited {
text-decoration: none;
}
#fet a:link, #fet a:visited {
text-decoration:none;
color: #000;
}
#fet a:hover {
color:#f26214;
}
<!---HTML--->
<!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>
<title>Core 4 Innovative: Website Solutions For Your Small Business</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content=" core 4,web,webpage developer,design,web designer, freelance,low cost" />
<meta name="robots" content="index,follow" />
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body id="body">
<div id="maincontainer">
<table id="Table_01" width="720" height="961" border="0" cellpadding="0" cellspacing="0">
<ul id="nav">
<li><a href="http://www.core4innovative.com/home.html">Home</a></li>
<li><a href="http://www.core4innovative.com/about/about.html">About Us</a></li>
<li><a href="http://www.core4innovative.com/process/our_process.html">Our Process</a></li>
<li><a href="http://www.core4innovative.com/services/services.html">Our Services</a></li>
<li><a href="http://www.core4innovative.com/contact/contactus.aspx">Contact Us</a></li>
</ul>
<div id="textpad">
<ul>
<li class="promise"><a href="#">Affordable Web Hosting Starting at $9.99 per month!<a></li>
</ul>
<div id="box">
<p><span class="name">Core 4 Innovative</span> puts your online success within reach. Using our affordable
website solutions, unique development process and standardized
methods for design you can be sure to recieve a customized product that adds value to your business!</p>
</div>
<div id="lowerbox">
<p><span class="name">We Serve Every Major Industry:</span></br>
Restuarants • Real Estate • Insurance • Entertainment • Apparel • Automotive • Energy • Professional Services</p>
</div>
<div id="featured">
<p><span id="fet"><a href="http://www.core4innovative.com/portfolio/portfolio.html" alt="our featured client">Our Featured Client</a></span></p>
</div>
<div id="customize">
<p>Customize Your website</p>
</div>
<tr>
<td colspan="3">
<img src="images/top.jpg" width="720" height="12" alt=""></td>
</tr>
<tr>
<td>
<img src="images/logo.jpg" width="258" height="137" alt=""></td>
<td colspan="2">
<img src="images/apple_graphic.jpg" width="462" height="137" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/topdivider.jpg" width="720" height="48" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/topdivider-06.jpg" width="502" height="3" alt=""></td>
<td rowspan="2">
<img src="images/notepad.jpg" width="218" height="305" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/getaquotebox.jpg" width="502" height="302" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/roundboxes.jpg" width="720" height="370" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/footer.jpg" width="720" height="88" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="258" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="244" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="218" height="1" alt=""></td>
</tr>
</table>
</div>
</body>
</html>
答案 0 :(得分：1)
您忘记将导航放入<td>和<tr>。启动<table>后，该标记之后的所有内容（不是“表格标记”）（例如<th>）都需要位于<tr>和<td>。有关详细信息，请参阅：http://www.w3schools.com/html/html_tables.asp
要解决此问题，只需将您的ul放入<tr>和<td>
<tr><td>
<ul id="nav">
<li><a href="http://www.core4innovative.com/home.html">Home</a></li>
<li><a href="http://www.core4innovative.com/about/about.html">About Us</a></li>
<li><a href="http://www.core4innovative.com/process/our_process.html">Our Process</a></li>
<li><a href="http://www.core4innovative.com/services/services.html">Our Services</a></li>
<li><a href="http://www.core4innovative.com/contact/contactus.aspx">Contact Us</a></li>
</ul>
</td>
</tr>
此外，页面上的任何其他html元素都必须位于<tr>或<caption>）和<td>标记中（例如div的“框”和“lowerbox”;在开始另一个td）之前，需要关闭div。
如果我是你，我会一起摆脱所有的表格元素。如果您确实想使用表格来布局内容，请仅在内容区域中使用它。在进入内容区域之前，您无需使用所有图像启动表格。
另外，为了避免将来出现css问题，请始终使用css reset开始您的css文件。这将帮助您顺利前进！
您用来设置导航样式的CSS很好。对于IE获得的所有糟糕的说唱（完全应得），错误有时是由于编码器的疏忽（即你忘了关闭你的标签）。大多数浏览器都很好，忽略了你的疏忽，但IE通常不会清理你丢失的标签混乱。
我提供了一个简单的页面结构来放置您的代码。
<html>
<head>
<title></title>
</head>
<body>
<div id="header">
<!-- your <ul> nav -->
</div>
<div id="content">
<!-- your table with images (if you really want to use a table! -->
</div>
<div id="footer">
<!-- your footer info -->
</div>
</body>
</html>
答案 1 :(得分：0)
好吧，摆脱宽度：ul中的680px修复它...不确定导致它的具体IE错误是什么，但是这个宽度似乎应用于列表中的最后一项而不是列表整体。通过在你的ulli（border：solid 1px＃f00;）样式中添加边框来使用穷人的萤火虫来看它。
也许其他人可以提供更详细的信息......