【分享】小心，IE中width/height的设定值可能被其内容撑大
所谓大脚穿小鞋，脚指头露外边，IE很好，给你换一双大鞋，哈！

经常会遇到一个问题，明明内容宽度高度较大，包含它的元素宽度高度不够，在IE中内容却不溢出；还有就是IE中布局看起来很正常，在其他浏览器中却显的乱其八糟的……
看，这是证据：

HTML code

<style>
    div {
       border: 1px solid red;
       height: 20px;
       width: 200px;
    }
</style>
<div>1. IE6<br/>2. IE7<br/>3. IE8</div>
<div>1. Firefox1<br/>2. Firefox2<br/>3. Firefox3</div>
<div>1. Chrome</div>
<div>1. Safari</div>
<div>1. Opera</div>

在IE清清楚楚，明明白白：

其他浏览器中则是乱七八糟，一塌糊涂：

用debug工具查看了一下才发现，IE 中不是内容没有溢出，其他浏览器也没出错，错的是IE的内容把包含它的元素的高度宽度撑大了。
内容和包含它的元素的关系，也就是元素和其包含块的关系，在我分享的帖子：【分享】说说标准 --CSS中非常重要的可视化格式模型(visual formatting model)简介 里简单的介绍了包含块，其中说明，包含块不能限制内容的尺寸，但是可以通过overflow特性 overflow 特性达到处理溢出的子孙元素的目的。

先来瞧瞧什么是 overflow。
“overflow”特性定义了当一个块级元素的内容溢出该元素的内容区域时是否被剪切，它的默认值是“visible”，即不进行剪切，这可能导致该元素的内容在该元素的content box外被渲染。
关于“overflow”的详细资料，在这里 http://www.w3.org/TR/CSS21/visufx.html#overflow。

可见，不设置这个值，内容区域大于包含块区域尺寸时，多出的部分，会在包含块的外面渲染。

看一个例子：

HTML code

<div style="width:100px; height:100px; border:5px solid red;">
    <div style="width:200px; height:200px; background-color:green;"></div>
</div>

上面的代码中，里面的 DIV 高度宽度都是200px，大过包含它的 DIV的宽度和高度。
以上代码在IE6(QS)/IE7(Q)/IE8(Q)中，效果如下图：

而在Firefox，Chrome 和 Safari 以及 IE7(S) 和 IE8(S) 中，表现为：

其中 Q代表 Quirks Mode，即常说的兼容模式；S 代表Standards Mode，即常说的标准模式。不大清楚模式的同学，可以看看这篇帖子：【分享】浏览器兼容性问 题综述——正确的认识浏览器兼容性问题

按道理说，绿色的内容大出红色框的部分，应该在红色框的外面渲染，正如在 Firefox，Chrome 和 Safari 以及 IE7(S) 和 IE8(S) 中的表现。而在IE6(QS)/IE7(Q)/IE8(Q) 中，内容却奇怪的把包含块给撑开了，明显的是 IE6(QS)/IE7(Q)/IE8(Q) 的bug。

那么，这个bug到底与overflow有关系么？

修改一下测试用例，给外面的DIV设置 “overflow:hidden”后：

HTML code

<div style="width:100px; height:100px; border:5px solid red; overflow:hidden;">
    <div style="width:200px; height:200px; background-color:green;"></div>
</div>

所有浏览器中效果都一致：

内容超出包含块的部分，都按照标准被剪切掉了。

而把“overflow” 置成”overflow:auto”和”overflow:scroll”后，所有浏览器也都一致，显示出了滚动条：


可见，在IE6(S)(Q) IE7(Q) IE8(Q)中，当包含块的 overflow 特性是 “visible” 时，内容被强制在其内部被渲染，如果内容尺寸过大，包含块的尺寸将也被内容撑大，这是IE6(S)(Q) IE7(Q) IE8(Q)中的 bug。

这个问题的解决方式呢，其实很简单，不明确设置元素的尺寸就好了。如果必须设置尺寸，那么，最好设置一个合适的尺寸，并且保证你的页面在标准模式下，这样，只有在IE6下可能出问题。

更多的兼容性问题：
【分享】浏览器兼容性问题目录

------解决方案--------------------
楼主扯出的这个问题只是冰山一角了，还是说说根源hasLayout吧~~
------解决方案--------------------
BUG,BUG....这个词说得有点泛滥了.
IE的好多处理,说是BUG并不合适,只能说是对某些处理的决策不同.很显然,IE在这方面过多地采用了一些容错性的自动处理.如果全说成是BUG,也太辱没了一般程序员的智商.
------解决方案--------------------
解释问题的角度不同罢了