我正在尝试更好地学习HTML / CSS。我正在为朋友的餐饮公司开发一个网站，我完成了所有关于Chrome和IE的开发工作，并且让我看到了我想要的一切。但是在完成所有这些工作之后，我去看了Firefox，一切都以不同的方式呈现，内容方式不合适。我已经尝试过各种CSS更改，但无法弄明白。
我有以下网页......
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Spot On Dining & Consulting</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Main Container -->
<div id="container">
<!-- Banner -->
<div id="banner" class="bannerAndMenuStyle">
<img src="images/Banner.png" width="940" height="200" />
</div>
<!-- Menu -->
<div id="menu" class="bannerAndMenuStyle">
<a href="index.html"><img src="images/home.jpg" onmouseover="this.src='images/home2.jpg';" onmouseout="this.src='images/home.jpg';" /></a>
<a href="about.html"><img src="images/about.jpg" onmouseover="this.src='images/about2.jpg';" onmouseout="this.src='images/about.jpg';" /></a>
<a href="food.html"><img src="images/food.jpg" onmouseover="this.src='images/food2.jpg';" onmouseout="this.src='images/food.jpg';" /></a>
<a href="services.html"><img src="images/services.jpg" onmouseover="this.src='images/services2.jpg';" onmouseout="this.src='images/services.jpg';" /></a>
<a href="contact.html"><img src="images/contact.jpg" onmouseover="this.src='images/contact2.jpg';" onmouseout="this.src='images/contact.jpg';" /></a>
</div>
<!-- Content -->
<div id="contentWrapper">
<table id="foodContentTextWrapper" cellspacing="15px">
<tr>
<td colspan="12" valign="bottom">
<h1 align="center">Food</h1>
</td>
</tr>
<tr height="420px" valign="top">
<td colspan="3" valign="top" align="center">
<table>
<tr height="5px"><td></td></tr>
<tr>
<td align="center" valign="center">
<img src="images/CheesePlatter1.jpg"/>
</td>
</tr>
<tr height="25px"><td></td></tr>
<tr>
<td align="center" valign="center">
<img src="images/HogRoast.jpg"/>
</td>
</tr>
<tr height="25px"><td></td></tr>
<tr>
<td align="center" valign="center">
<img src="images/Buffet5.jpg"/>
</td>
</tr>
<tr height="25px"><td></td></tr>
<tr>
<td align="center" valign="center">
<img src="images/SoupAndSandwich.jpg"/>
</td>
</tr>
<tr height="20px"><td></td></tr>
</table>
</td>
<td colspan="6" valign="top">
<h2>
<p>At Spot On Dining, we firmly believe that variety is the spice of life. We love to create healthy, delicious food from any cuisine that the event calls for.</p>
<p>We will work with you to develop a personalized menu that fits your needs. We have experience with anything from pig roasts to vegetarian feasts, with a large variety of vegetarian and vegan dishes.</p>
<p>Below are just a few styles of dishes that our customers commonly enjoy ordering...</p>
<ul style="list-style-image: url(images/Silverware.png);height:280px;line-height:20px;vertical-align:middle;">
<li>Southwest Appetizers and Entrees</li>
<li>Mediterranean Pasta and Salads</li>
<li>Traditional Italian Entrees</li>
<li>Whole Roasted Pig (traditional Lechon)</li>
<li>Cheese and Vegetable Platters</li>
<li>Lasagnas (meat or vegetarian)</li>
<li>Braised and Pulled Wild Boar Leg</li>
<li>Soups, Salads and Sandwiches of all sorts</li>
<li>BBQ Skewers (Chicken, Shrimp, Beef, Pork)</li>
<li>Filipino Dishes (Lengua, Menudo, etc.)</li>
<li>French Desserts (Creme Brulee, Crepes, etc.)</li>
</ul>
<p>Have a hankering for a favorite childhood dish from back home, but just can't find it anywhere? No problem! Just give us a description and we will be glad to suit your needs.</p>
<p>Special dietary needs? No problem! We are very experienced with making dishes appropriate for Diebetic, Low Sodium, and other special needs, without sacrificing taste.</p>
</h2>
</td>
<td colspan="3" valign="top">
<table>
<tr height="5px"><td></td></tr>
<tr>
<td align="center" valign="center">
<img src="images/Skewers.jpg"/>
</td>
</tr>
<tr>
<td align="center" valign="center">
<img src="images/App2.jpg"/>
</td>
</tr>
<tr>
<td align="center" valign="center">
<img src="images/StuffedJaps.jpg"/>
</td>
</tr>
<tr height="20px"><td></td></tr>
</table>
</td>
</tr>
</div>
</div>
</div>
</body>
</html>
基本上，在Firefox中，顶部横幅和顶部菜单看起来与IE和Chrome完全相同。但是，表格的所有内容都会向右显示，而不是在菜单下方，就像在IE和Chrome中正确显示一样。
这是我的main.css文件。
body {background-color: #777777;background-repeat: no-repeat;}
a:link {color: #CCCCCC;}
a:visited {color: #CCCCCC;}
#container {width:941px;min-height:600px;margin-left:auto;margin-right:auto;}
.bannerAndMenuStyle img{display:block;float:left;border:0;}
#homeContentTopImage {padding-top:25px;}
#contentWrapper {height:auto; min-height:744px;background:linear-gradient(#D9E8D9, #888888);color:black;font-family:Verdana;}
#homeContentTextWrapper {padding-left:25px;padding-bottom:25px;font-family:Verdana;font-size:0.6em}
#homeContentTextWrapper h2{font-style:italic}
#homeContentTextWrapper p{font-style:normal}
#aboutContentTextWrapper {display:block;margin-left:auto;margin-right:auto;padding-top:25px;padding-left:25px;padding-bottom:25px;font-family:Verdana;font-size:0.6em}
#servicesContentTextWrapper {font-family:Verdana;}
#servicesContentTextWrapper h2 {font-size:0.9em;}
#foodContentTextWrapper {font-family:Verdana;}
#foodContentTextWrapper h2 {font-size:0.9em;}
任何想法为什么会在Firefox中发生这种情况，而在Chrome和IE中看起来很正常？我确定它是关于CSS的东西，但我不知道是什么。
答案 0 :(得分：1)
将clear:both添加到#contentWrapper。我认为横幅中浮动的img会导致问题，因为没有任何内容被清除。