CSS W3C盒子和IE盒子的如何互相转化

Question

要使IE浏览器的盒子模型显示的和谷歌浏览器的一致，该怎么做

那反过来呢，要使谷歌浏览器的盒子模型显示得跟IE浏览器一致（让谷歌跟ie一致，不是ie跟谷歌一致），该怎么做？

Answer 1

box-sizing: border-box; IE盒子
box-sizing: content-box;  W3C盒子

其实IE的盒子明显更合理，后来W3C实在不好意思，就出了这个转换盒子模型的属性

不是上面的？难道我搞错了？问的我怀疑人生了。。。

Answer 2

1. 首先说一下box-sizing属性box-sizing: content-box|border-box|initial|inherit;
   inherit表明从父元素继承；initial表明默认值；
   content-text表示width和height属性只包含内容区的大小；
   border-box表示width和height属性是border + padding + content的大小；

2. 拿width属性举例，chrome截图如下：
   使用content-box

   

   使用border-box

   

3. 拿width属性举例，IE7和IE8截图如下：
   默认值应该是content-box
   

4. 拿width属性举例，IE7以下截图如下：
   默认值是border-box
   

5. 由3和4可见，浏览器不同的版本box-sizing的默认值是不一样的，所以主要看你需要用哪种box-sizing，然后在你的CSS样式中明确声明一下，不让浏览器使用默认值就好了。

Answer 3

这个问题我还真没考虑过，我平时计算宽度还是会加上边框和内边距的。推荐一篇网上的参考：http://www.cnblogs.com/huangz...。

Answer 4

box-sizing要考虑兼容的时候，还是不适合使用，如果针对某一种场合，比如IE或非IE的话，可以考虑使用