转载自Bubblings Blog

原文地址:http://riny.net/2013/haslayout/

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是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来触发。

参考文章:

http://www.satzansatz.de/cssd/onhavinglayoutrev07-20060517.html

http://www.smallni.com/haslayout-block-formatting-contexts/

深入理解 IE haslayout的更多相关文章

  1. 实践中总结——理解haslayout和BFC

    1.HASLAYOUT 首先,haslayout翻译成中文就是:有布局. 所谓布局,指的是一个元素可以对本身和里边的元素进行尺寸计算和定位.这里只是谈IE6/7,据说微软之所以不是对所有元素默认有布局 ...

  2. IE haslayout的理解与bug修复

    要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念.大多 IE下的显示错误,就是源于 haslayout 什么是 haslayout ? ...

  3. BFC与HasLayout的理解

    1.(Block Formatting Contexts)BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域 ...

  4. 由css reset想到的深入理解margin及em的含义

    由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...

  5. BFC和haslayout

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

  6. 深入理解定位父级offsetParent及偏移大小

    前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...

  7. 理解CSS相对定位和固定定位

    × 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...

  8. hasLayout && Block Formatting Contexts

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

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

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

随机推荐

  1. ORACLE视图添加备注

    ORACLE视图添加备注 版权声明:本文为博主原创文章,未经博主允许不得转载. create or replace view oes_material_series_ref as select t.p ...

  2. CentOS下重新安装yum

    1,下载最新的yum-3.2.28.tar.gz并解压 #wget http://yum.baseurl.org/download/3.2/yum-3.2.28.tar.gz#tar xvf yum- ...

  3. HTTP协议漫谈

    简介 园子里已经有不少介绍HTTP的的好文章.对HTTP的一些细节介绍的比较好,所以本篇文章不会对HTTP的细节进行深究,而是从够高和更结构化的角度将HTTP协议的元素进行分类讲解. HTTP的定义和 ...

  4. 柯南君:看大数据时代下的IT架构(2)消息队列之RabbitMQ-基础概念详细介绍

    一.基础概念详细介绍 1.引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松 ...

  5. Oracle Spatial-元数据及SDO_GEOMETRY

    一.空间表的元数据 将表的SDO_GEOMETRY列的所有对象作为一个空间层.Spatial需要对所有空间对象进行验证.创建索引和查询.此时需要为图层指定适当的元数据,该数据包含如下信息:维度.维度边 ...

  6. linux中读写锁的rwlock介绍-nk_ysg-ChinaUnix博客

    linux中读写锁的rwlock介绍-nk_ysg-ChinaUnix博客 linux中读写锁的rwlock介绍 2013-02-26 13:59:35 分类: C/C++   http://yaro ...

  7. Tcl学习之--语法|变量

    [语法|变量] l 脚本.命令和单词 Tcl提供了大约100条命令.Tk提供了另外几十条,脚本包括一条或多条,通过换行符或分号分隔开. set a 12 set b 23 也能够写成一行: set a ...

  8. VB6关于判断模态窗体的问题

    模态窗体也有人叫模式窗体,是否为模态窗体由Show方法的参数决定: 语法 object.Show style, ownerform Show 方法的语法包含下列部分: 部分 描述 object 可选的 ...

  9. inotify

    inotify,文件系统控制函数,通知机制: ioctl, io控制函数

  10. grivid中切换按钮,两个按钮交替

    给grivdView不要设值 button的url和 commandName 在rowDatabound中操作变换 protected void GVData_RowDataBound(object ...