定义

  haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性,有两种状态:true或false。当其为true时,代表该元素有自己的布局,否则代表该元素的布局继承于父元素。
  [注意]通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况

HTML标签

  默认触发hasLayout的有如下HTML标签:

  【1】html,body
  【2】table,tr,th,td
  【3】img
  【4】hr
  【5】input,button,select,textarea,fieldset
  【6】frameset,frame,iframe

CSS属性

  可以触发hasLayout的有如下CSS属性:

  【1】display:inline-block
  【2】height/width:除了auto
  【3】float:left/right
  【4】position:absolute
  【5】writing-mode(IE专有属性,设置文本的垂直显示):tb-rl
  【6】zoom(IE专有属性,设置或检索对象的缩放比例):除了normal

【IE7专有的触发hasLayout的CSS属性】

  【1】min-height/max-height/min-width/max-width:除none
  【2】overflow\overflow-x\overflow-y:除visible
  【3】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-浏览器下LI4px空隙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. IE hasLayout详解

    hasLayout定义 haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分.在Internet Explorer中,一个元素要么自己对自身的内容进行计算 ...

  2. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  3. css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括

    *知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...

  4. 前端技术之_CSS详解第四天

    前端技术之_CSS详解第四天 一.第三天的小总结 盒模型box model,什么是盒子? 所有的标签都是盒子.无论是div.span.a都是盒子.图片.表单元素一律看做文本. 盒模型有哪些组成: wi ...

  5. 详解CSS float属性

    CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的 ...

  6. 详解CSS float属性(转)

    详解CSS float属性   阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者 ...

  7. css 浮动问题详解

    浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...

  8. CSS系列 (05):浮动详解

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...

  9. Linq之旅:Linq入门详解(Linq to Objects)

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

随机推荐

  1. sizeof和指针

    对于sizeof(类或对象)这种形式,如classA1{ public: int a; static int b;A1();~A1();}sizeof计算类或对象在栈中分配的大小,类或对象的静态变量存 ...

  2. 深入分析PHP优化及注意事项

    深入分析PHP优化及注意事项 1.尽量静态化: 如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍. 当然了,这个测试方法需要在十万级以上次执行,效果才明显 ...

  3. UIViewController的生命周期(根视图view从无到有的过程)

    UIViewController的生命周期实质上是指根视图view从无到有的过程 1.首先新建一个工程:不从mainstoryBoard加载 (删除入口) 在AppDelegate.m --> ...

  4. Mac 下 WebStorm 配置go语言开发环境

    一.下载安装WebStorm,我的是 二.在WebStorm 中安装go插件 三.在本机安装go开发环境,直接装pkg文件,https://golang.org/doc/install 四.在WebS ...

  5. SQL Server里的闩锁介绍

    在今天的文章里我想谈下SQL Server使用的更高级的,轻量级的同步对象:闩锁(Latch).闩锁是SQL Server存储引擎使用轻量级同步对象,用来保护多线程访问内存内结构.文章的第1部分我会介 ...

  6. 【重磅推荐】腾讯Bugly2015年移动应用质量大数据报告

    2015年,随着移动智能设备的普及,移动端用户的增速明显放缓:相比之下,由于云服务.众筹平台.推广平台等基础设施和服务的不断改善,极大降低了创业的门槛,越来越多人投身于移动应用的创新创业中. 想让用户 ...

  7. 旺信UWP公测邀请

    各位园主好,今天已将旺信Win10版提交到商店Beta测试. 哪位朋友需要邀请码的,请在评论中回复,我给你私信. 数量有限,共10枚. 2016/3/10 14:55 更新 10枚邀请码已发给前10位 ...

  8. Java提高篇(三六)-----Java集合细节(二):asList的缺陷

    在实际开发过程中我们经常使用asList讲数组转换为List,这个方法使用起来非常方便,但是asList方法存在几个缺陷: 一.避免使用基本数据类型数组转换为列表 使用8个基本类型数组转换为列表时会存 ...

  9. Linux grep命令和正则表达式

    介绍 grep是一个功能强大的文本搜索命令,可以用它来搜索某个文件中是否包含指定的搜索内容,它可以利用正则表达式来做复杂的筛选操作,它还可以为其它命令传输给管道的筛选,比如我们常用到的分析单个进程的操 ...

  10. DDD领域驱动设计实践篇之如何提取模型

    需求说明: 省级用户可以登记国家指标 省级用户和市级用户可以登记指标分解 登记国家指标时,需要录入以下数据:指标批次.文号.面积,这里省略其他数据,下同 登记指标分解时,需要录入以下数据:指标批次.文 ...