我们都知道浏览器有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. Oracle14~23

    14.查询所有学生的Sname.Cno和Degree列. 15.查询所有学生的Sno.Cname和Degree列. 16.查询所有学生的Sname.Cname和Degree列. 17. 查询“9503 ...

  2. 虚拟机Linux 的一些基础命令和注释

    cd命令 cd    ==回到初始,主目录 cd -  ==回到上一级目录交替 cd ~ ==回到root家目录 cd .  ==当前目录 cd .. ==进入上一级目录 ls命令 ls     == ...

  3. 3.Redis常用命令:String

    字符串类型是Redis中最为基础的数据存储类型,它在Redis中是二进制安全的,这便意味着该类型可以接受任何格式的数据,如JPEG图像数据或Json对象描述信息等.在Redis中字符串类型的Value ...

  4. Java ---理解MVC架构

    之间的文章,我们主要是介绍了jsp的相关语法操作,我们可以通过请求某个jsp页面,然后由相对应的servlet实例给我们返回html页面.但是在实际的项目中,我们很少会直接的请求某个页面,一般都是请求 ...

  5. input是否checked与使用jquery的attr或prop方法无关

    最近在项目中有这样一个需求,用户在下单时可以选择优惠券,也可取消选择,并且可以多次选择,取消. 这是一个典型的input标签checked功能,博主使用radio元素实现此需求,但是优惠券只能选中,不 ...

  6. 透视I/O多路复用

    透视I/O多路复用 我写的不是select这些函数的教学,需要了解的请自行Google或者去man,这些是帮助我理解函数的封装之下的道理. 需要回答的问题 I/O准备好了指什么?什么叫I/O已经可读/ ...

  7. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  8. CSS背景图片常见属性设置

    在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称);  //默认在父级元素内的左上角 2)背景平铺方式:ba ...

  9. 又拍云SSL证书全新上线,提供一站式HTTPS安全解决方案

    互联网快速发展,云服务早已融入每一个人的日常生活,而互联网安全与互联网的发展息息相关,这其中涉及到信息的保密性.完整性.可用性.真实性和可控性.又拍云上线了与多家国际顶级 CA 机构合作的数款OV & ...

  10. Linux环境下用户空间与内核空间数据的交换方式

    在linux环境开发过程中,经常会需要在用户空间和内核空间之间进行数据交换. 介绍了 Linux 系统下用户空间与内核空间数据交换的几种方式 第一节:使用procfs实现内核交互简明教程(1) 第二节 ...