想更好的理解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. 监控redis python脚本

    #!/bin/env python #-*- coding:utf- -*- import json import time import socket import os import re imp ...

  2. layoutSubviews

  3. DataAnnotations里DisplayAttribute和 ValidationAttribute 如何从资源文件读取信息,显示多语言

    这个是我们常见的AccountModel代码 public class ChangePasswordModel { [Required] [DataType(DataType.Password)] [ ...

  4. mongodb群集

    项目目标:故障自动切换和自动修复成员节点,各个数据库之间数据完全一致.项目描述:副本集没有固定主节点,是整个集群选举得出的一个主节点,当其不工作时变    更其他节点.最小的副本集也应该具备一个pri ...

  5. Windows Phone 十、数据绑定

    数据绑定:是一种 XAML 和后台数据交互的方式(桥梁) 通过后台进行数据绑定 <Grid> <TextBox x:Name="txtHello" Text=&q ...

  6. (转)Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址, ...

  7. DataRow映射实体

    public static T ConvertToModel<T>(DataRow dr) where T : new() { T t = new T(); Type modelType ...

  8. paper 131:【图像算法】图像特征:GLCM【转载】

    转载地址:http://www.cnblogs.com/skyseraph/archive/2011/08/27/2155776.html 一 原理 1 概念:GLCM,即灰度共生矩阵,GLCM是一个 ...

  9. linux 连接到阿里云服务器

    当Windows拥有xshell软件可以连接到你的远程服务器时,Linux其实自己带有的ssh就可以连接: 具体命令是: ssh root@60.2.5.201.81然后输入你服务器的密码:××××× ...

  10. Java表单中关于JavaScript的非空必输验证,你的程序和大牛有多少差距╮( ̄▽ ̄")╭

    var defaultEmptyOK = false; // スペース var whitespace = " \t\n\r "; function checkNull (theFi ...