想更好的理解CSS，尤其是IE下对CSS的渲染，hasLayout是一个非常有必要彻底弄清楚的概念，大多数IE下的显示错误，就是源于hasLayout。hasLayout是一种只读属性，有两种状态true或false，当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。

什么是Layout呢？

"Layout" 是 IE 的一个私有属性，并不是W3C标准。它决定了一个对象（就是一个标签div、li等）在内容中如何显示、与周围对象的位置关系、以及怎样响应程序或用户产生的事件。

这个属性可以被一些css强制激活。一些HTML标签默认具有haslayout。
PS：一个对象的layout属性被激活，它的具体表现就是haslayout=true。我们可以用IE Developer Toolbar工具看到被激活的对象带有"haslayout = -1"的属性。

你可能就问：微软干嘛要设layout这个东西呢？当一个对象的layout被激活时，它以及它的子对象的定位和尺寸计算将独立进行，不受附近对象 的干扰。也就是说它拥有一个独立的布局（layout）。因此浏览器要花费更多的代价来处理拥有haslayout的对象。为了提高性能，微软增加了 layout这个IE私有的概念。

通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况

默认触发hasLayout的标签（不全）

html,body

table,tr ,th ,td

img

hr

input,button,select,textarea,fiedset

frameset,frame,iframe

触发hasLayout的CSS属性

display:inline-block

height/width:除了auto

float：left/right

position:absolute

writing-mode(IE专有属性，设置文本的垂直显示):tb-r1

zoom(IE专有属性，设置或检索对象的缩放比例):除了normal

IE7专有的触发hasLayout的CSS属性

min-height/max-geight/min-width/max-width:除了none

overflow/overflow-x/overflow-y:除了visible

position:fixed

实例：

1.解决IE7浏览器下父级边框不阻止子级上下margin传递的bug

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

body{

    margin: 0;

}

ul{

    margin: 0;

    padding: 0;

    list-style: none;

}

.list{

    border: 10px solid black;

    background-color: red;

    /*触发hasLayout*/

    /*float:left;*/

}

.in{

    height: 100px;

    width: 100px;

    margin-top: 50px;

    background-color: blue;

}

</style>

</head>

<body>

<ul class="list">

    <li class="in"></li>

</ul>

</body>

</html>

2.配合display:inline让块元素模拟inline-block

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

body{

    margin: 0;

}

.box{

    width: 100px;

    height: 100px;

    background-color: red;

    display:inline-block;

    /*配合display:inline触发hasLayout*/

    /*     float:left;

    display:inline; */

}

</style>

</head>

<body>

<div class="box" id="box"></div><span>测试inline-block用</span>

</body>

</html>

3.解决IE7浏览器下li的4PX空隙bug（IE7浏览器下li有高度或宽度或zoom:1，且仅包含内联元素，且内联元素被设置为display:block,li下会多出3px的垂直间距）

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

body{

    margin: 0;

}

ul{

    margin: 0;

    padding: 0;

    list-style: none;

}

.list{

    width: 200px;

    background-color: lightgreen;

}

.in{

    height: 100px;

    background-color: lightblue;

}

.span{

    display: block;

    zoom:1;

}

</style>

</head>

<body>

<ul class="list">

    <li class="in">

        <span class="span">1231</span>

    </li>

    <li class="in">

        <span class="span">1232</span>

    </li>

</ul>

</body>

</html>

4.触发浮动 元素的父级的hasLayout，浮动元素会被layout元素自动包含，相当于IE7浏览器下实现清浮动

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

body{

    margin: 0;

}

ul{

    margin: 0;

    padding: 0;

    list-style: none;

}

.list{

    background-color: lightgreen;

    height: 200px;

}

.in{

    float: left;

    width: 100px;

    height: 100px;

    border: 1px solid black;

    background-color: lightblue;

}

.test{

    width: 100px;

    height: 150px;

    background-color: yellow;

}

</style>

</head>

<body>

<ul class="list">

    <li class="in"></li>

    <li class="in"></li>

</ul>

<div class="test">测试浮动</div>

</body>

</html>

什么是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

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

  6. haslayout详解

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

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

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

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

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

  9. hasLayout与BFC的触发条件

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

随机推荐

  1. xtrabackup备份rds记录

    在执行最后一步时 mysqld_safe --defaults-file=/home/mysql/data/backup-my.cnf --user=mysql --datadir=/home/mys ...

  2. ios - block循环引用Demo示例

    当实例变量中有了block属性,并且用copy来修饰,但是当调用block中的代码的时候,如果block中运用了self.属性的时候回造成循环引用. // // ViewController.h // ...

  3. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.0 版新增查询引擎管理

    欲了解V3.0版本的相关内容可查看下面的链接地址. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.0 版本发布 RDIFramework.NET — 基于.NET的快速信 ...

  4. [Android Tips] 23. How to fail/stop Gradle task immediately if some conditions are not met

    throw new GradleException("conditions are not met") 参考 How to fail/stop task immediately i ...

  5. Ubuntu16.04配置phpmyadmin

    原文 如何安装phpmyadmin-Mysql 数据库管理 使用界面管理器:系统->系统管理->新立得软件包管理器->搜索 phpmyadmin->右键标记安装.或直接使用一条 ...

  6. 【转】Win8下安装SQL Server 2005无法启动服务

    安装了Windows8,但是发现不支持Sql Server 2005的安装.网上找了很多办法,基本上都有缺陷.现在终于找到一种完全正常没有缺陷的办法了,和大家分享一下. 1.正常安装任一版本的SQL ...

  7. chattr的常用参数详解

    chattr的常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在实际生产环境中,有的运维工程师不得不和开发和测试打交道,在我们公司最常见的就是部署接口.每天每个人部署的 ...

  8. Coursera台大机器学习课程笔记5 -- Theory of Generalization

    本章思路: 根据之前的总结,如果M很大,那么无论假设泛化能力差的概率多小,都无法忽略,所以问题转化为证明M不大,然后上章将其转化为证明成长函数:mh(N)为多项式级别.直接证明似乎很困难,本章继续利用 ...

  9. robotium教材（一）：robotium环境搭建

    博客Melon麦东=原创内容 目录: 1.基于无源码apk测试工程的搭建 2.基于有源码的测试工程搭建 3.遇到的问题(各种刨坑,各种尝试,网上水货回答真的太多,希望看见此文的同学你们是幸运的)   ...

  10. [原创]在使用SDK 23(6.0)版本后org.apache.http相关的类找不到的解决办法

    参考: http://stackoverflow.com/questions/32153318/httpclient-wont-import-in-android-studio http://www. ...