New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

理解 IE haslayout #1

Open
8788 opened this Issue Nov 4, 2018 · 0 comments

Comments

Projects
None yet
1 participant
@8788
Copy link
Owner

8788 commented Nov 4, 2018

历史文章,发布于2012年,现迁移到issues

1. 什么是haslayout

layout是windows IE的一个私有概念,它决定了元素如何对其内容定位和尺寸计算,以及与其他元素的关系和相互作用。当一个元素“拥有布局”时,它会负责本身及其子元素的尺寸和定位。而如果一个元素“没有拥有布局”,那么它的尺寸和位置由最近的拥有布局的祖先元素控制。

必须说明的是,IE8及以上浏览器使用了全新的显示引擎,已经不在使用haslayout属性,因此文中提到的haslayout属性只针对IE6和IE7。

2. 为什么会有haslayout

理论上说,每个元素都应该控制自己的尺寸和定位,即每个元素都应该“拥有布局”,当然这只是理想状态。而对于早期的IE显示引擎来说,如果所有元素都“拥有布局”的话,会导致很大的性能问题。因此IE开发团队决定使用布局概念来减少浏览器的性能开销,即只将布局应用于实际需要的那些元素,所以便出现了“拥有布局”和“没有拥有布局”两种情况。

3. 默认情况下拥有布局的元素

下面,先来看下哪些元素在默认情况下就“拥有布局”。

html, body
table
tr, td
img
hr
input, select, textarea, button
iframe, embed, object, applet
marquee

4. 查看和触发haslayout

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

5. haslayout引起的bug及解决方法

  • IE 很多常见的浮动 bug 。
  • 元素本身对一些基本属性的异常处理问题。
  • 相对定位的元素没有布局。
  • 拥有布局的元素外边距不叠加。

当然可能还有一些我们没有发现的bug,一般情况下我们会使用zoom: 1;来触发haslayout从而来解决这些bug,因为zoom: 1不会影响到元素的现有表现,虽然zoom: 1无法在IE5.0中触发haslayout,但是IE5.0已经不在我们的测试范围内了,所以可以放心的使用zoom: 1。另外在IE6及较早版本的浏览器中还可以使用height: 1%来触发,IE7中可以使用min-height: 0来触发。

参考文章:

@8788 8788 added the 2012 label Nov 4, 2018

@8788 8788 changed the title test 理解 IE haslayout Nov 12, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment