IE的hasLayout

在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算尺寸，要么依赖于包含块来组织内容和计算尺寸。

为了协调这两种方式的矛盾，IE 浏览器的渲染引擎使用了一个私有属性 hasLayout，它是一个布尔型变量，取值为 true 或 false。当一个元素的 hasLayout 属性取值为 true 时，就说这个元素“拥有布局”。

hasLayout是一个只读属性，无法通过 Javascript 进行设置，但可以通过 Javascript 读取它的值。如：

object.currentStyle.hasLayout；

在IE中，使用 hasLayout 来控制元素的尺寸和定位：当一个元素拥有布局时，由它自己来控制自身及后代元素的定位和尺寸；否则，将由最近拥有布局的祖先元素来控制。

由于浏览器要花费更多的代价来处理拥有布局的元素，为了提高性能，IE 设计者只让一部分元素默认拥有布局。这些元素包括：

html、body
table、tr、td
img
hr
input、select、teatarea、button、fieldset
iframe、embed、object、applet
marquee

除了 IE 默认拥有布局的元素外，Web 开发者还可以使用特定的 CSS 属性使元素拥有布局，也被称作“使元素触发布局”。设置以下任一CSS属性，会自动使元素拥有布局：

position: absolute
float: left或right
display: inline-block
width: 除auto外的任何值
height: 除auto外的任何值
zoom: 除normal外的任何值（Microsoft属性，不能通过检测）
writing-mode: tb-rl（Microsoft属性，不能通过检测）

另外，在IE7中，设置以下任一CSS属性，也会使元素触发布局：

position: fixed
overflow: hidden或scroll或auto
min-width: 任何值
max-width: 除 none 外的任何值
min-height: 任何值
max-height: 除 none 外的任何值

特别注意的是，IE 8 使用全新的渲染引擎，并抛弃 hasLayout。因此，在实际开发中，只需针对 IE 8 以下的版本，为某些元素触发 hasLayout。

有经验的CSS开发人员都知道，hasLayout 可能是许多IE 问题的根源。一个典型例子，就是当一个元素内只包含浮动或绝对定的位元素时，会导致父元素的高度塌陷。在IE6或IE7中，为元素添加 zoom：1 就触发了haslayout，就可以修复高度塌陷的问题。

虽然 hasLayout 也会像 BFC 那样影响元素的尺寸和定位，但它却不是一套完整的标准。并且，默认情况下，只有部分元素拥有布局，这导致了 IE 下的诸多 Bug，触发布局的更大意义在于解决IE 下的一些Bug，而不是利用它的一些“副作用”来达到某些效果。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

IE的hasLayout相关推荐

理解haslayout
定义: haslayout是IE7-浏览器的特有属性.hasLayout是一种只读属性,有两种状态:true或false. 当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素. ...
关于Block Formatting Context－－BFC和IE的hasLayout
转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...
haslayout详解
定义 haslayout是IE7-浏览器的特有属性.hasLayout是一种只读属性,有两种状态:true或false.当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素. [ ...
IE haslayout的理解与bug修复
要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念.大多 IE 下的显示错误,就是源于 haslayout 什么是 haslayout ...
bfc和haslayout
1 BFC是什么 Block Formatting Context (块格式化上下文)是W3C CSS 2.1 规范中的一个概念,在CSS3中被修改为flow root.格式化则表明了在这个环境中,元 ...
php斯芬克斯,斯芬克斯之迷——ie私有属性haslayout的困扰
就象神话中的斯芬克斯一样,ie的私有属性haslayout是个神秘且让人困惑的难缠东西,她只游荡于ie(这片沙漠)之下. 她无法使用css声明直接创建.即便是对于ie,她也不能说是一个实实在在存在的属 ...
hasLayout属性
在IE中,当一个元素的hasLayout属性被触发后(不可逆转),就会拥有一个布局,可以进行更多的样式更改操作. 包含该属性的元素有 body html/table tr th td/img/hr/i ...
[css] 说说你对hasLayout的理解，触发hasLayout的方式有哪些？
[css] 说说你对hasLayout的理解,触发hasLayout的方式有哪些? hasLayout可理解为是IE7以及更旧版本的BFC. 跟BFC一样,hasLayout不能直接通过属性进行设置, ...
[css] 请问触发hasLayout的后果是什么？
[css] 请问触发hasLayout的后果是什么? 继承父元素的布局. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面 ...
hasLayout和filter滤镜的细节
filter:alpha(opacity=60); IE(<9)透明滤镜失效. 如果我们设置宽度后filter就会有效果,而这个没有设置宽度hasLayout 属性值是0 熟悉haslayout ...

IE的hasLayout

IE的hasLayout相关推荐

最新文章

热门文章