我们都知道浏览器有bug，而IE的bug似乎比大多数浏览器都多。IE的表现与其他浏览器不同的原因之一就是，显示引擎使用一个称为布局(layout)的内部概念。
 
因为布局是专门针对显示引擎内部工作方式的概念，所以一般情况下不需要了解它。但是，布局问题是许多IE显示bug的根源，所以理解这个概念以及它如何影响CSS对修复bug是有帮助的。

一、什么是haslayout


haslayout是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，使用布局概念来控制元素的尺寸和定位。在理想情况下，所有元素都控制自己的尺寸和定位。但是，这在IE中会导致很大的性能问题。因此，IE开发团队决定只将布局应用于实际需要它的那些元素，这样就可以充分地减少性能开销。
 
拥有布局(have layout)的元素负责本身及其子元素的尺寸和定位。如果一个元素没有布局，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。IE显示引擎利用布局概念减少它的处理开销。一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。
 
为了调节这两个不同的概念，渲染引擎采用了hasLayout的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout），当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。因此，一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has layout”的时候，我们的意思是指它的微软专有属性 hasLayout 被设为了true 。一个“layout元素”可以是一个默认就拥有layout的元素或者是一个通过设置某些CSS属性得到layout 的元素。如果某个HTML元素拥有haslayout属性，那么这个元素的 haslayout的值一定只有true，haslayout为只读属性一旦被触发，就不可逆转。通过IE Developer Toolbar可以查看IE下HTML元素是否拥有haslayout，在IE Developer Toolbar下，拥有haslayout的元素，通常显示为“haslayout = -1”。
 
二、默认拥有haslayout属性
 
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
 
三、触发haslayout属性
 
很多情况下，我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。 
hasLayout属性不能直接设定，你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。下面列出可以触发hasLayout的一些CSS属性值。
 
display 
启动haslayout的值:inline-block 
取消hasLayout的值:其他值 
-------------------------------------- 
width/height 
启动hasLayout的值：除了auto以外的值
取消hasLayout的值：auto
 ( 对 IE6 及更早版本来说很常用，该方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1% (height:1%;)。但是要注意，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。)
--------------------------------------- 
position 
启动hasLayout的值：absolute 
取消hasLayout的值：static 
---------------------------------------- 
float 
启动hasLayout的值：left或right 
取消hasLayout的值：none 
--------------------------------------- 
zoom 
启动hasLayout的值：有值 
取消hasLayout的值：narmal或者空值 
(又一个ie私有属性，不兼容标准。)
ie7还有一些额外的属性可以触发该属性（不完全列表）： 
min-height: (任何值) 
max-height: (任何值除了none) 
min-width: (任何值) 
max-width: (任何值除了none) 
overflow: (任何值除了visible) 
overflow-x: (任何值除了visible) 
overflow-y: (任何值除了visible)
position: fixed 
 
四、发现及使用
 
因元素hasLayout而导致的问题其实一般都很容易发现：往往是内容出现错位甚至完全不可见，比如含浮动或者绝对定位子元素的容器高度会塌陷，在ie6/ie7下我们为其添加zoom：1属性就触发了haslayout，从而修复高度塌陷的问题;再比如，我们经常会碰到ie6和ie7同时出现的bug，这个时候可以考虑是否源于 haslayout，可以添加一些可以触发haslayout的属性来解决。
 

IE haslayout的更多相关文章

  1. BFC和haslayout

    待补充 参考链接:http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 标准浏览器: BFC(block formatt ...

  2. 谈BFC和haslayout

    今天提到BFC和haslayout,就顺带在网上查查资料,总结一下它们. CSS2我们再熟悉不过,当然它里面我们需要掌握的,就是CSS2的选择器和布局,选择器总共31种.避开这个不说,我们说布局. 布 ...

  3. hasLayout && Block Formatting Contexts

    转自:http://www.smallni.com/haslayout-block-formatting-contexts/ 因为本人脑子不好使,自己打印出了一张hasLayout和Block For ...

  4. BFC给我的帮助以及对hasLayout的认识

    布局的时候经常想让一个或几个元素并并排的放在一起,有时给其中的一个浮动,元素是在一行了,可还是都左边重叠了,总是这样那样改来改去,小白的我也是醉了! 今天偶然间看到了了BFC这个东东,虽然现在还是不是 ...

  5. 什么是hasLayout？

    想更好的理解CSS,尤其是IE下对CSS的渲染,hasLayout是一个非常有必要彻底弄清楚的概念,大多数IE下的显示错误,就是源于hasLayout.hasLayout是一种只读属性,有两种状态tr ...

  6. haslayout

    什么是 haslayout ? haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分.在Internet Explorer中,一个元素要么自己对自身的内容 ...

  7. haslayout详解

    定义 haslayout是IE7-浏览器的特有属性.hasLayout是一种只读属性,有两种状态:true或false.当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素. [ ...

  8. CSS魔法堂：hasLayout原来是这样!

    前言 过去一直听说旧版本IE下很多诡异bug均由一个神秘角色引起的,那就是hasLayout.趁着最近突然发神经打算好好学习CSS,顺便解答多年来的疑惑. hasLayout到底是何方神圣? hasL ...

  9. IE浏览器bug罪魁祸首--hasLayout

    IE浏览器一直都是前端程序员最头疼的,IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部概念. 认识hasLayout--haslayout是Windows In ...

  10. hasLayout与BFC的触发条件

    hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念,在很多时候,我们需要触发它们去实现有些效果.例如清除浮动时需要触发hasLayout与BFC:很多自适应的两栏和三栏布局(两 ...

随机推荐

  1. Excel 按模板格式导出

    最近遇到一个问题,就是导出数据的时候需要自定义的表头,如图 如果自己用代码写表头的话,可能会有点复杂,而且代码量很多,所以我就想了一个办法,直接在Excel里面把表头定义好,然后把数据写入Excel模 ...

  2. phpcms2008常用函数小结

    {$head[title]} 页面标题,用法: <title>{$head[title]}-{$PHPCMS[sitename]}</title> {$PHPCMS[siten ...

  3. 深入探究stm32GPIO口模式（类比51）

    关于STM32GPIO口的8种工作模式,我们先引出一些问题? STM32GPIO口如果既要输入又要输出怎么办? 1.浮空输入模式 上图红色的表示便是浮空输入的过程,外部输入时0读出的就是0,外部输入时 ...

  4. FB,Flash,as3 Bug集

    一.Flash builder 报错 当导入3.0的项目时运行出现如下错误: 进程已终止,没有建立到调试器的连接.error while loading initial content 启动命令详细信 ...

  5. 性能测试培训：Ajax接口级性能测试之jmeter版

    性能测试培训:Ajax接口级性能测试之jmeter版   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.在poptest认为工具 ...

  6. 构造器和多态（Chapter8.3）

    构造器不具有多态性(它们是static方法,只不过该static声明是隐式的),但还是非常有必要理解构造器怎样通过多态在复杂的层次结构中运作,这一理解将有助于大家避免一些令人不快的困扰. 在main中 ...

  7. 看Lucene源码必须知道的基本规则和算法

    上中学的时候写作文,最喜欢的季节我都是写冬天.虽然是因为写冬天的人比较少,那时确实也是对其他季节没有什么特殊的偏好,反而一到冬天,自己皮肤会变得特别白.但是冬天啊,看到的只有四季常青盆栽:瓜栗(就是发 ...

  8. 深入理解css中vertical-align属性

    一.为什么要写这篇文章 今天看到一个问题: 两个div 都设置 display:inline-block,正常显示:但是在第二个div中加一个块级元素或者内联元素,显示就变了个样,为什么? <m ...

  9. 用SourceTree轻松Git项目图解

    这篇文档的目的是:让使用Git更轻松. 看完这篇文档你能做到的是: 1.简单的用Git管理项目. 2.怎样既要开发又要处理发布出去的版本bug情况. SourceTree是一个免费的Git图形化管理工 ...

  10. 使用vs2015搭建Asp.net Core

    准备工具    1.首先得安装vs2015 并且升级至 update3及以上  2.安装.net core sdk.附上官网下载地址 http://www.microsoft.com/net/down ...