Question

下面提到的代码适用于谷歌浏览器，但每当我使用IE7 / 8时输出都很奇怪，整个页面都变得混乱。请帮我纠正代码，并告诉我一些资源或书籍，我应该遵循以学习好的CSS。

 <html>
 <head>
 <style>

 .wrapper
 {
  width:1000px;
  height:auto;
  margin-left:auto;
  margin-right:auto;

 }

  .header
 {
  height:250px;
  width:1000px;
  background-color:red;
 }

 .menu_bar
 {
  height:40px;
  width:1000px;
  background-color:blue;
  margin-left:auto;
  margin-right:auto;
 }

 .menu_item
 {
 height:40px;
 width:300px;
 float:left;
 text-align:center;
 color:white;
 }

.page
 {
 width:1000px;
 height:500px;
 background-color:yellow;
 margin-left:167px;
 }

 .page_left
 {
 width:150px;
 height:500px;
 background-color:green;
 float:left;
 }

 .page_right
 {
 background-color:black;
 height:500px;
 width:250px;
 float:right;
 }

 .footer
 {
 height:200px;
 width:1000px;
 background-color:orange;
 margin-left:167px;
 }
 </style>
 <head>

 <body>
 <div class="wrapper">
 <div class="header"></div>
 </div>

 <div class="menu_bar">
<div class="menu_item">Home</div>
<div class="menu_item">About Us</div>
<div class="menu_item">Contact Us</div>
 </div>

 <div class="page">

 <div class="page_left">xyz</div>
 <div class="page_right">pqr</div>

 </div>

 <div class="footer"></div>

 </div>

 </body>
 </html>

Answer 1

您的网页上看起来有一个额外的结束div标记：</div>。 IE会比其他浏览器更加挑剔。尝试删除它。

Answer 2

试试这个css ......

 .wrapper
 {
  width:1000px;
  height:auto;
  margin-left:auto;
  margin-right:auto;
  margin-left:167px;
 }

CSS问题与不同的浏览器

2 个答案: