FF与IE关于height width理解的差异

     最近在做网页的过程中遇到了一些浏览器的标准问题，这里想把最有心得的地方写下来。
    由于我的电脑上只安装了IE6.0和FireFox，所以目前只能在这两个环境下测试。最初的页面是在IE6.0环境下开发，等喷了一地血总算弄出了想要的版式以为大功告成时用FireFox一查看所有的div的位置都乱七八糟，超级链接的样式也走了型。才知道前面喷的血只是热身罢了。引发问题的地方一部分是由于默认设定的不同，还有一部分是标准的差异，以下只说最有心得的地方，其它乱七八糟的问题一概不提了。
    最让人头疼的是IE6.0与FireFox对width和height属性的作用域不同。在网上查的时候有人说FF会把padding的值加到width和height上，但我觉得那样理解不对，归根结底还是作用域的不同引起的。网页里一个容器从外向里有四层：margin（边距），bording（边框），padding（填充距），content（内容）。在IE6.0中width和height两个属性的作用域是margin以内的内容而即padding+bording+content，而在FF中width和height的作用域是content。对于这种差异在两种浏览器中查看以下代码就明白了。
<div style="height:150px; width:150px; border:25px solid #000000; padding:25px; margin:50px;">这个容器在IE6.0和FireFox下相同吗？</div>
    以上代码产生的容器的大小明显不一样。
    在网上查的资料中有一种方法是利用了浏览器之间对代码理解能力的差异性来解决这种问题。期中一种是利用IE6.0和FF对!imprtant的理解能力，即IE6.0不会优先处理!important的代码，但由于有文章说这种方法会在IE7.0产生新的问题，所以我没有尝试。还有种方法，代码如下：
#topbar {color:#f00;} /* Moz */
* html #topbar {color:#0f0;} /* IE6 */
*+html #topbar {color:#00f;} /* IE7 */
    课以看到各个浏览器对这三断的理解能力是不同的。这段代码很有效，借助它我完成了页面对FF的兼容。但我认为浏览器之间标准的差异性本来就是一种错误，那么利用差异来解决差异只是一种错上加错，时下流行的说法就是不和谐，以后在别的浏览器上还可能会出现更大的问题。所以最终我还是摒弃了这种方法。我的最终解决方法是利用了浏览器对代码理解的共同点来达到同样的目的，求同而不存异，大和谐。我先用一个容器来定义width和height，然后再在这个容器里面嵌套容器来定义padding，border，这样，对不同浏览器这些的理解是不会存在不同的，即尽最大的可能求同。如下代码产生的容器在不同的浏览器里看应该是相同的了：
<div style="margin:50px;padding:0px; height:150px; width:150px;">
 <div id="left" style="display:inline;height:150px; width:25px; overflow:hidden;">
  <div id="leftborder" style=" border-left:25px solid #000000; height:150px;">
  </div>
 </div>
 <div id="center" style="display:inline; height:150px; width:100px;">
  <div id="top" style="display:inline; height:25px; width:100px; overflow:hidden;">
   <div id="topborder" style="border-top:25px solid #000000; height:25px; width:100px;">
   </div>
  </div>
  <div id="content" style="display:inline; height:100px; width:100px;">
  </div>
  <div id="bottom" style="display:inline; height:25px; width:100px; overflow:hidden;">
   <div id="bottomborder" style="border-top:25px solid #000000; height:25px; width:100px;">
    <div style="height:0px; width:100px;"></div>
   </div>
  </div>
 </div>
 <div id="right" style="display:inline; height:150px; width:25px; overflow:hidden;">
  <div id="rightborder" style="border-left:25px solid #000000; height:150px;">
  </div>
 </div>
</div>
虽然这段代码相比上面的长很多，但按照模块来看的话不难理解，每个容器完成自己该完成的任务，绝不多做少做，我知道会发生什么，不可能出现我所意料之外的事情，我想这样很好。当然，这个方法有很大的缺陷，就是容器是死的，大小绝对不能改变，所以我想在可以的情况下还是要避免，只在个别情况下才能适用。