一起来看一个宽度问题，为了一目了然，我举了列子，通过列子，可以清楚的看到区别：
IE 6 ，Firefox ，Opera等
真实宽度=width+padding+border+margin
IE5
真实宽度=width-padding-border
很明显，第一种下很完美的布局在第二种情况下后果是很凄惨的！
不用着急，今天我们就解决这个问题：
首先了解一个概念：
width:280px !important; //这个是正确的width书写方法，请这样写清楚；而width(空格)/**/:300px; //IE6等浏览器/win不解析这句，所以IE6/win仍然认为width的值是280px；而IE5.X/win读到这句，新的数值(300px)覆盖掉了旧的，因为!important标记对他们不起作用。这样就OK了。
现在我们看实例：
【padding布局宽度】
<div style="width:700px; margin:0 auto;">
<div style="float:left; width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:280px!important; width /**/:300px; padding:0 10px 0 10px; background-color:#999966;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>
【解释】在IE6,IE7,IE8,FF等浏览器直接获取实际/内容宽度middle280px,真实宽度计算：280PX+10PX+10PX=300PX；
IE5实际/内容宽度是middle280PX；真实宽度计算：320PX-10PX-10PX=300PX;（以下不再说明）
你可能觉得有点绕，没关系，你只要记住IE5宽度书写方式：width(空格)/**/:300px；其他浏览器书写方式：width:280px!important; 这两个宽度之间的差值就是你定义的Padding + border 总大小(以下会验证)；
学习的最好方法是自己调试，用不同的值去调试，这样你的记忆会更深刻！
【margin布局宽度】
<div style="width:700px; margin:0 auto;">
<div style="float:left; width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:280px!important; width /**/:280px; margin:0 10px 0 10px; background-color:#999966;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>
IE6,IE7,IE8,FF等 middle: 实际/内容宽度是280PX，真实宽度是：300PX；
IE5 middle: 实际/内容宽度是280PX，真实宽度是：300PX；
（注释：真实宽度永远都要保持等于300，300PX+200PX+200PX=700PX, 否则DIV就会撑开，我们要讨论的就是在固定宽度300PX不变的情况下不同浏览器的宽度定义，所以以下不会再显示真实宽度值了）
在这里我建议你们下载一个工具IETester，这样可以同时观察在不同IE下的浏览情况。方便学习和实际使用。
【border布局宽度】
<div style="width:700px; margin:0 auto;">
<div style="float:left; width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:280px!important; width /**/:300px; border:10px #ff0000 solid; background-color:#999966; text-align:left;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>
IE6,IE7,IE8,FF等：300PX-border 20px=280PX;
IE5: 280PX(IE6...)+border 20px=300px;
【margin + border】
<div style="width:700px; margin:0 auto;">
<div style="float:left; width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:260px!important; width /**/:280px; margin:0 10px 0 10px; border:#ff0000 10px solid; background-color:#999966; text-align:left;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>
IE6,IE7,IE8,FF等：300PX-margin 20px - border 20px=260PX;
IE5: 260PX(IE6...)+border 20px=280px;
【margin + border + padding】
<div style="width:700px; margin:0 auto;">
<div style="float:left; width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:240px!important; width /**/:280px; margin:0 10px; border:#ff0000 10px solid; padding:0 10px;background-color:#999966; text-align:left;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>
IE6,IE7,IE8,FF等：300PX-margin 20px - border 20px - padding 20px=240PX;
IE5: 240PX(IE6...)+border 20px+padding 20px=280px;
【border + padding】
<div style="width:700px; margin:0 auto;">
<div style="float:left; width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:260px!important; width /**/:300px; border:#ff0000 10px solid; padding:0 10px;background-color:#999966; text-align:left;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>
IE6,IE7,IE8,FF等：300PX-border 20px - padding 20px=260PX;
IE5: 260PX(IE6...)+border 20px + padding 20px=300px;
【margin + padding 】
<div style="width:700px; margin:0 auto;">
<div style="float:left; width:200px; background-color:#0066FF">left</div>
<div style="float:left; width:260px!important; width /**/:280px; margin:0 10px; padding:0 10px;background-color:#999966; text-align:left;">middle</div>
<div style="float:left; width:200px; background-color:#000000;">right</div>
</div>
IE6,IE7,IE8,FF等：300PX-margin 20px - padding 20px=260PX;
IE5: 260PX(IE6...)+padding 20px=280px;