一个页面在三个浏览器中的显示问题

最近因为项目要求于是开始学PHP……大家都知道，不同浏览器对相同的html代码的显示结果不一样，兄弟连官方网站细说PHP教程第15课 讲了相应差异的解决办法，我照着做了其中一段代码，可结果在360、IE者中显示一样，而拿到火狐中却完全不同了，但是我的代码跟教程中是一样的，请教解决方案？注：源代码如下
html代码如下：
<html>
  <head>
   <title>布局测试</title>
   <meta http-equiv="Content-Type" context="text/html charset=GB2312" >
   <link rel="stylesheet" type="text/css" href="layTest.css">
  </head>
  
  <body>
   <div id="container">
   　　<div id="header">
         <div id="logo"> 商标
         </div>
         <div id="banner">
         </div>
         <div id="tool"> 工具栏
         </div>
         
         <div class="nav">
         </div>
         <div id="menu"> 菜单
         </div>
       </div>   
        
       <div class="nav">
       </div>
       <div id="main">
       </div>
       
       <div class="nav">
       </div>
       <div id="footer">
       </div>
   </div> 
  </body>

相应css代码如下：
</html>
body{
  margin:0px;
  padding:0px;
  font:12px Arial,宋体;
  text-align:center; 
}#container{
  margin-left:auto;
  margin-right:auto;
  width:960px;
  height:800px;
  text-align:left; 
}#header{
  float:left;
  width:100%; }#header #logo{
  float:left;
width:200px;
height:80px;
margin-right:10px;
background:#ff00ff;
}#header #banner {
  float:left;
width:600px;
height:80px;
background:blue;
}#header #tool {
  float:right;
  width:140px;
 height:80px;
 background:#a12bbf;                              
}#header #menu {
  float:left;
  width:100%;
  height:20px;
  background:#aaa; 
}
#main{
  width:100%;
  height:600px;
  background:yellow;}#footer{
  width:100%;
  height:80px;
  background:blue;
}　.nav{
 float:left;
 width:100%;
 height:10px;
 clear:both;
 overflow:hidden;
} //分隔条样式

解决方案 »

  1.   

    360用的是IE的内核,当然是一样的.一般先用firefox测试.因为这里正常的话除了ie的浏览器,一般还是IE9以前的会有些不同.其他的如chrome,opera,safari一般都能正常显示.不过以后浏览器会统一的.
      

  2.   

    360用的是IE的内核 火狐装一个dubug工具慢慢调试 和ie做比较
      

  3.   

    我都是用Chrome调试，然后再看IE。