haslayout详解

定义
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>

一个不是计算机专业的理科生，转行学前端

如果你也有一个编程梦，这是咱们的前端学习QQ群：784-783-012

（在线学习，8个月时间，目前就业，广州工作，月薪16k）

haslayout详解

推荐阅读更多精彩内容