【分享】重新认识IE盒模型bug

黑暗无论怎样悠长，白昼总会到来。 ---莎士比亚
炎热无论怎样悠长，凉爽总会到来。 ---WebAdvocate 明目张胆的抄袭

终于迎来了凉爽的一天，老天为我的辛苦而感动了么……
哈，自恋的黑猫……

那个广为人知的 “IE盒模型Bug”，是说IE6以前的版本和IE6及以后版本的兼容模式中，盒子模型(不了解盒子模型的可以看看：【分享】说说标准 ---- 你真的了解盒子模型(box model)吗？)跟其他浏览器不同，声明的宽度和高度包含 padding和border在内。因此元素显示出来要比其他浏览器里小。
我一直认为写生先写意，从“意”的角度来讲，盒子模型在IE和其他浏览器中的差异是这个意思（注意一下画作的点睛之笔--夺命诱惑之梦露式美人痣）：

从写实的角度来见，请看具体的例子：

<div style="border:20px solid red; padding:20px; background-color: green; width: 100px; height:100px;">

    <div style="width:100%;height:100%; background-color:yellow;"></div>

</div>

截图对比：

可见，定义好’width’，’height’，’padding’ 还有 ’border’的元素，在IE的兼容性模式里，要比其他浏览器中小。差距还真够大的，常言道：差之毫厘，谬以千里，这何止是毫厘啊，有几公里那么多！！
这个 bug，会引起布局上的问题，导致布局混乱。严重之极。稍有正义感的江湖人士，无不欲除之而后快，但何从下手呢？常言又到，斩草须除根，所以，还须先找到其错误的根源才好。
其实，IE的盒模型bug的实质，是 ”width” 和 “height” 的作用位置的问题。

“width”，”height”作用位置

根据W3C CSS2.1规范的描述，可以通过给一个元素设置 “width” 和 “height” 以定义其内容尺寸，即这个尺寸是作用在该元素的content box上的。
注：
看这里：【分享】说说标准 ---- 你真的了解盒子模型(box model)吗？。
一个元素的矩形区域可以看作是4个套着的区域：margin box，border box，padding box 和content box。最里面一层是content box。
表格元素TABLE是一个特例，表格的content区域是由其border box决定的，因此在TABLE上设置的“width”和“height”将作用在其border box上。
注意：
“width”不能应用于行内非替换元素、表格行（TR）和行组（TBODY）。
“height”不能应用于行内非替换元素、表格列（COL）和列组（COLGROUP）。
感兴趣的同学，可以看看W3C CSS2.1的第十章的 10.2 以及 10.5 中的内容。

当给一个块级非替换元素设置“width”、 “height”时，它们在IE6(Q) IE7(Q) IE8(Q)中被错误的作用到了该元素的border box，也就是说在这些浏览器中，“width”、“height”并不被认为是“内容尺寸”。这就是臭名昭著的 IE 盒模型bug。
另外，当给一个IFRAME元素设置 “width”、“height”时，它们在IE6(Q) IE7(Q) IE8(Q)中被错误的作用到了padding box。
要怎么样才能避免这个问题呢？

在 IE中盒模型bug下页面不正常时：
为了使 IE 中的元素的盒子显示正常，不再偏小，应该怎么做呢？答案其实很简单，既然都是 IE 的混杂模式下出的问题，那么，让页面工作在标准模式下就可以了。

在 IE 盒模型bug下页面正常时：
如果，页面是针对IE6以前版本的浏览器做的，则会引起在其他浏览器中偏大，进而会影响布局，这时候有应该怎么办呢？--------使用CSS 3 草案中的新属性：box-sizing。

CSS 3 草案box-sizing

我们在开发过程中发现，有时候，如对页面中的大块区域进行布局时，将“width”和“height”作用到border-box是更灵活易用的，但W3C的 CSS2.1规范却规定了他们只能作用在content-box上。考虑到这个问题，CSS 3中引入了一个新的property：“box-sizing”。我们可以根据需要，通过给“box-sizing”设置不同的值来选择“width”和 “height”的作用位置。在这里：http://www.w3.org/TR/css3-ui/#box-sizing

目前的主流浏览器都支持这个属性，只不过，在 Wekit浏览器和Firefox中都是以扩展的方式出现的。其中，IE 中是”box-sizing”，Firefox 则是”-moz-box-sizing”，Safari 3+ 和Chrome是”-webkit-box-sizing”。

box-sizing的可选值，有3个，其中一个是 inherit，表示继承，剩下的两个用来控制宽度高度的作用位置：
⃟content-box
和CSS 2.1中的定义保持一致，在一个元素上定义的 “width” 和 “height”（以及他们的min/max属性）将决定该元素的 content box 的尺寸。
该元素的 “padding” 和 “border” 在定义的 “width” 和 “height” 之外呈现。
⃟border-box
在一个元素上定义的 “width” 和 “height”（以及他们的min/max属性）将决定该元素的 border box 的尺寸。
该元素的 “padding” 和 “border” 将在定义的 “width” 和 “height” 之内呈现。
内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负 ([CSS21], section 10.2)，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

所以，如果一个页面是在IE早期版本的基础上设计的，即在有IE盒模型Bug时页面布局良好，但在其他浏览器中无IE盒模型Bug时布局混乱，又不想重构页面，那么简单快速的修复方式是通过设置 “box-sizing”的值为“border-box”来使其他浏览器的尺寸作用位置与IE早期版本相同。如：
*{box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

over！！！

最后，更多的兼容性问题帖子：【分享】浏览器兼容性问题目录