IE兼容问题解决根源：深刻理解hasLayout属性，原理与使用方法

解决IE兼容问题是比较头疼的问题，无论你是新入门的菜鸟还是久经考验的职业行家，兼容问题，特别是IE，IE6会让你非常头疼。很多时候，div CSS在IE下的解析十分奇怪，一个比较经典的bug就是设置border的时候，有时候border会断开，刷新页面或者滚动滚动条的时候，断掉的部分又会连接起来。这些问题的根源很多时候来源于IE的一个特有属性：hasLayout。hasLayout是一个非常有意思的学术研究，如何深刻理解hasLayout属性，及他的使用方法，原理，解决IE的兼容问题非常有用处，下面来讲解一下hasLayout的属性，原理与使用方法。

这些诡异的问题往往大部分和IE下一个神秘的属性相关——hasLayout。hasLayout是IE浏览器专有的一个属性，用于CSS的解析引擎。有时候在IE下一些复杂的CSS设置解析起来会出现bug，其原因可能与hasLayout没有被自动触发有关，我们通过一些技巧，手动触发hasLayout属性就可以解决Bug了。这也算是针对IE下疑难杂症的特殊偏方了，很多时候，触发了hasLayout就可以药到病除了。

hasLayout的触发方法有很多种，例如设置width,height值，设置position为relative等。但如果设置了width,height,或position都会在触发hasLayout的同时带来一些副作用的。早期的一些工程师推荐使用“height:1%”来触发hasLayout，那时还没有出现IE7,而height属性在IE6下其实是按照"min-height"来解析的，所以只要对IE6进行hack,"* html{height:1%}"就可以触发hasLayout，同时又不带来副作用了。后来出现的IE7仍然存在很多hasLayout的问题，但IE7已经能够正确识别height属性了，“height:1%”的方法已经不再适用了。

原文链接： http://www.cnblogs.com/hnyei/archive/2011/09/23/2185823.html