Open 8788 opened 6 years ago
历史文章，发布于2012年，现迁移到issues
layout是windows IE的一个私有概念，它决定了元素如何对其内容定位和尺寸计算，以及与其他元素的关系和相互作用。当一个元素“拥有布局”时，它会负责本身及其子元素的尺寸和定位。而如果一个元素“没有拥有布局”，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。
必须说明的是，IE8及以上浏览器使用了全新的显示引擎，已经不在使用haslayout属性，因此文中提到的haslayout属性只针对IE6和IE7。
理论上说，每个元素都应该控制自己的尺寸和定位，即每个元素都应该“拥有布局”，当然这只是理想状态。而对于早期的IE显示引擎来说，如果所有元素都“拥有布局”的话，会导致很大的性能问题。因此IE开发团队决定使用布局概念来减少浏览器的性能开销，即只将布局应用于实际需要的那些元素，所以便出现了“拥有布局”和“没有拥有布局”两种情况。
下面，先来看下哪些元素在默认情况下就“拥有布局”。
html, body table tr, td img hr input, select, textarea, button iframe, embed, object, applet marquee
haslayout是windows IE私有的，而且它不是css属性，我们无法通过css显式的设置元素的haslayout。但我们可以通过javascript来查看一个元素是否拥有布局：
<div id="div1">这是一个div</div>; var oDiv = document.getElementById('div1'); alert(oDiv.currentStyle.hasLayout); //弹出false
如果元素拥有布局，obj.currentStyle.hasLayout就会返回true，否则返回false。hasLayout是一个只读属性，所以也无法通过javascript进行设置。
在实际开发过程中，很多IE下（IE6、IE7）的显示问题，都可以通过触发元素的haslayout来解决，下面列出一些常见的可以触发元素haslayout的属性和方法：
float: left或right display: inline-block position: absolute width: 除auto外任何值 height: 除auto外任何值 zoom: 处normal外任何值 writing-mode: tb-rl
在IE7中，以下属性也可以触发元素的haslayout
min-height: 任意值 min-width: 任意值 max-height: 除none 外任意值 max-width: 除none 外任意值 overflow: 除visible外任意值，仅用于块级元素 overflow-x: 除visible 外任意值，仅用于块级元素 overflow-y: 除visible 外任意值，仅用于块级元素 position: fixed
当然可能还有一些我们没有发现的bug，一般情况下我们会使用zoom: 1;来触发haslayout从而来解决这些bug，因为zoom: 1不会影响到元素的现有表现，虽然zoom: 1无法在IE5.0中触发haslayout，但是IE5.0已经不在我们的测试范围内了，所以可以放心的使用zoom: 1。另外在IE6及较早版本的浏览器中还可以使用height: 1%来触发，IE7中可以使用min-height: 0来触发。
参考文章：
1. 什么是haslayout
layout是windows IE的一个私有概念，它决定了元素如何对其内容定位和尺寸计算，以及与其他元素的关系和相互作用。当一个元素“拥有布局”时，它会负责本身及其子元素的尺寸和定位。而如果一个元素“没有拥有布局”，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。
必须说明的是，IE8及以上浏览器使用了全新的显示引擎，已经不在使用haslayout属性，因此文中提到的haslayout属性只针对IE6和IE7。
2. 为什么会有haslayout
理论上说，每个元素都应该控制自己的尺寸和定位，即每个元素都应该“拥有布局”，当然这只是理想状态。而对于早期的IE显示引擎来说，如果所有元素都“拥有布局”的话，会导致很大的性能问题。因此IE开发团队决定使用布局概念来减少浏览器的性能开销，即只将布局应用于实际需要的那些元素，所以便出现了“拥有布局”和“没有拥有布局”两种情况。
3. 默认情况下拥有布局的元素
下面，先来看下哪些元素在默认情况下就“拥有布局”。
4. 查看和触发haslayout
haslayout是windows IE私有的，而且它不是css属性，我们无法通过css显式的设置元素的haslayout。但我们可以通过javascript来查看一个元素是否拥有布局：
如果元素拥有布局，obj.currentStyle.hasLayout就会返回true，否则返回false。hasLayout是一个只读属性，所以也无法通过javascript进行设置。
在实际开发过程中，很多IE下（IE6、IE7）的显示问题，都可以通过触发元素的haslayout来解决，下面列出一些常见的可以触发元素haslayout的属性和方法：
在IE7中，以下属性也可以触发元素的haslayout
5. haslayout引起的bug及解决方法
当然可能还有一些我们没有发现的bug，一般情况下我们会使用zoom: 1;来触发haslayout从而来解决这些bug，因为zoom: 1不会影响到元素的现有表现，虽然zoom: 1无法在IE5.0中触发haslayout，但是IE5.0已经不在我们的测试范围内了，所以可以放心的使用zoom: 1。另外在IE6及较早版本的浏览器中还可以使用height: 1%来触发，IE7中可以使用min-height: 0来触发。
参考文章：