对待超出容器范围的元素,一般常见的有两种解决方法:一种是添加滚动条(给容器添加overflow: auto),另一种就是隐藏元素超出范围的部分(给容器添加overflow: hidden)。虽然从可用性角度应该使用添加滚动条的方法以保证客户可以获得所需信息,但是在很多时候用隐藏的方法比较不会引起页面整体感觉混乱。不幸,世界上目前市场份额最大的浏览器——IE6——对于overflow: hidden的支持不佳。如果单单是给容器添加overflow: hidden很可能根本看不见任何效果。但是一旦容器有了固定的高度、宽度,overflow: hidden立刻就达到了期望的效果。
IE6由于其东家——微软——的市场份额巨大加之长达5年的没有更新,可能是目前市面上 bug 所知最多的浏览器。IE 有一个概念叫做“拥有布局”(hasLayout,如果装了 IE Developer Toolbar 可以在属性栏看到),“拥有布局”某种程度上可以理解为就是拥有固定宽高。有不少 IE6 的bug仅通过给元素添加固定宽高就可以解决,这个就是跟 IE 的“拥有布局”概念紧密相连的。似乎很多时候 IE 都认为只有“拥有布局”的元素才可以拥有别的一些属性,因此有些时候,IE6 明明支持的CSS属性非要等到“拥有”了“布局”才会正常工作。说起来这也不是很难解决的问题,但是动辄要添加固定宽高会无端增加不比较的限制。由于目前还没有更加的解决方案——你能保证你的客户都是用 Fx、Safari、Opera 吗——因此,只能将就一下,think like IE.