郁闷，相对定位，宽度与内边距的计算问题

现在大多数WEB重构都应该已经放弃IE5.5及以下浏览器了吧，所以我们不用讨论他的宽度计算的问题。

据我所知，IE6，IE7，火狐及其他几个浏览器的宽度的计算都应该是：

width+padding-left+padding_right

hegiht+padding-top+padding-bottom

可是今天我搞了一个笑话。

帖代码看看：

<div id="box">

   <div id="box_01">绝对定位</div>

   <div id="box_02">浮动内容</div>

   <div id="box_03">浮动内容</div>

</div>

 

如果相在这里使用绝对定位，那么父级box就应该设置相对定位，我们看看样式。

 

#box{position:relative;width:736px;height:300px;margin:0px auto;padding-left:200px;}
#box_01{position:absolute;width:220px;height:300px;top:0;left:0;z-index:888;}
#box_02{height: 300px;width:625px;float:left;z-index:666;}
#box_03{height:300px;width:111px;float:left;}

哈哈，按照理论的角度来说，这样写就正常了，可是通过测试，在IE6下最开始box_01会显示，一刷新页面死活也不出现。

最后通过对box的样式修改，就解决了，修改如下红色处。

#box{position:relative;width:936px;height:300px;margin:0px auto;padding-left:200px;}

原来红色的地方是736px;可是如果想让在IE6下出现绝对定位的内容，这里必须是完整的宽度，不需要管padding-left的值。