在百度ife2016的任务3中,实现了一个简单的三栏布局。左右栏宽度固定,中间栏宽度自适应。父元素的高度应该等于三栏中最高的一个。
在这里遇到了一个问题:使用 float: left 和 float: right 控制左右栏,然后在父元素中使用 overflow: hidden 来清除浮动,使父元素高度等于三栏中最高。
在IE6中进行测试,发现如果左右栏高于中间栏,则高出的部分会溢出。
搜索之后找到了解决办法,就是在父元素中加一个 _zoom: 1; 原理大概是触发浏览器的haslayout机制。
haslayout 机制:
在IE中,一个元素要么自己对自身的内容进行计算和组织,要么依赖于父元素来计算尺寸和组织内容。
当haslayout属性为true时,就说元素有一个layout。此时,元素就要扩展去包含它的流出的内容。例如浮动或者很长的没有截断的单词,如果haslayout没有被设置成true,那么元素就要依靠某个祖先元素来渲染它。
当一个元素有layout时,它负责对自己和可能的子孙元素进行尺寸计算和定位。这样它就要花更大的代价来维护自身及里面的内容,而不是依赖于祖先元素来完成这些工作。