理解haslayout

一宅發表於2019-02-10

定義:

       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>            
複製程式碼

相關文章