布局仅在 Chrome 中运行良好。在 IE 和 Firefox 中，它无法正常工作，并且所有内容似乎都向左对齐，并且没有显示外包装。
我已按要求添加了 HTML 代码
/* CSS Document */
/* Reset */
body {background-color:#6CF; }
/* Headings */
h1, h2, h3, h4, h5, h6 (font-weigth: bold;}
h1 { font-size: 35px; color:blue }
h2 { font-size: 25px; color:blue }
h3 { font-size: 15px; color: red;}
/* Text Elements */
a { }
a.link { }
a.visited { }
a.active { }
a.focus { }
a.visited { }
a.visited { }
/* container */
#outerwrapper { width: 960px; margin:0px auto; background-color:white; }
#wrapper { width: 900px; margin:0px auto; background-color:white; }
#logo { margin: auto; text-align: center; }
#navigation { text-align: center; }
#navigation ul li { display:inline; }
#navigation ul{ border-top: 1px #000 solid; border-bottom: 1px #000 solid; margin-bottom:20px; }
#navigation ul a{padding: 25px;}
#navigation a { color: #33F; }
#navigation a.link { color: #33F; }
#navigation a.visited { color: #33F; }
#navigation a.active { color: #33F; }
#navigation a.focus { color: #33F; }
#navigation a.visited { color: #33F; }
#navigation a.visited { color: #33F; }
#banner {margin-bottom: 30px; }
.content { width: 900px; margin:auto; width: 900px; float:top; text-align:center }
.content-main { width: 500px; margin:auto; font-weight:bold; font-size:20px; text-align:left}
#news {width: 200px; float:right; padding:0px;}
.date {font-weight: bold;}
.footer { clear:both; padding-top: 5px; padding-bottom: 5px;}
.footer-text {text-align:center}
#mainimages {margin-top: 20px; width: 700px; float: left;}
aboutimages {margin-top: 20px; width: 700px; float: left;}
.servicesimage {width: 200px; float:left; margin-top: 40px; margin-left:20px;}
.servicelistleft {width: 300px; float:right; margin-top: 40px; }
.servicelistright {width: 300px; float:right; margin-top: 40px; margin-left:20px; }
.centertable { width: 500px; margin:auto;
margin-top: 30px;}
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id ="outerwrapper">
<div id="wrapper">
<div id="logo">
<h1><img src="images/logo.jpg" width="248" height="153" alt="Conti Computer Shop" /></h1>
</div>
<div id="navigation">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="services.html">SERVICES</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<div id ="banner">
<p><img src="images/test.jpg" width="900" height="202"/></p>
</div>
<div class ="content">
<h1>Your One Stop Shop for all Computer Needs !</h1>
<p class = "content-main">Welcome to our new website where you can find more about us, what Services we offer and contact us for more information. Rest Assured that our priority will always be to provide an excellent service at a good price. Thank You. </p>
</div>
<div id = "news">
<h2>Latest News</h2>
<p class="date">April 20, 2012</p>
<h3>Acer Laptops now available</h3>
<p class="date">April 12, 2012</p>
<h3>New Gadgets Just Arrived</h3>
<p class="date">April 05, 2012</p>
<h3>New HP Computers in stock</h3>
<p class="date">April 02, 2012</p>
<h3>Students discounts Launched</p>
</div>
<div id="mainimages">
<p>
<img src="images/sales.jpg" width="340" height="276" />
<img src="images/service.jpg" width="340" height="276" />
</p>
</div>
<div class ="footer">
<p class="footer-text"> 2012 - Conti Design</p>
</div>
</div>
</div>
</body>
</html>