我正在尝试更好地学习 HTML/CSS。我正在为一个 friend 的餐饮公司开发一个网站，我在 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 有关，但我不知道是什么。
最佳答案
将 clear:both 添加到 #contentWrapper。我认为横幅中 float 的 img 导致了问题，因为事后没有清除任何内容。
关于html - Firefox 在 div 中向右呈现表格，但在 IE 和 Chrome 中看起来正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21977217/