haslayout详解
定義
haslayout是IE7-瀏覽器的特有屬性。hasLayout是一種只讀屬性，有兩種狀態(tài)：true或false。當(dāng)其為true時(shí)，代表該元素有自己的布局，否則代表該元素的布局繼承于父元素。
[注意]通過element.currentStyle.hasLayout可以得出當(dāng)前元素的hasLayout情況
?
HTML標(biāo)簽
默認(rèn)觸發(fā)hasLayout的有如下HTML標(biāo)簽：
【1】html,body
【2】table,tr,th,td
【3】img
【4】hr
【5】input,button,select,textarea,fieldset
【6】frameset,frame,iframe
?
CSS屬性
可以觸發(fā)hasLayout的有如下CSS屬性：
【1】display:inline-block
【2】height/width:除了auto
【3】float:left/right
【4】position:absolute
【5】writing-mode(IE專有屬性，設(shè)置文本的垂直顯示):tb-rl
【6】zoom(IE專有屬性，設(shè)置或檢索對(duì)象的縮放比例):除了normal
?
【IE7專有的觸發(fā)hasLayout的CSS屬性】
【1】min-height/max-height/min-width/max-width:除none
【2】overflow\overflow-x\overflow-y:除visible
【3】position:fixed
?
用途
【1】解決IE7-瀏覽器下父級(jí)邊框不阻止子級(jí)上下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;/*觸發(fā)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觸發(fā)hasLayout*//* float:left;display:inline; */ } </style> </head> <body> <div class="box" id="box"></div><span>測(cè)試inline-block用</span> </body> </html>?
【3】解決在IE7-瀏覽器下LI4px空隙bug(IE7-瀏覽器下li有高度或?qū)挾然騴oom:1，且僅包含內(nèi)聯(lián)元素，且內(nèi)聯(lián)元素被設(shè)置為display:block，li下會(huì)多出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】觸發(fā)浮動(dòng)元素的父級(jí)的hasLayout，浮動(dòng)元素會(huì)被layout元素自動(dòng)包含，相當(dāng)于IE7-瀏覽器下實(shí)現(xiàn)清浮動(dòng)
<!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">測(cè)試浮動(dòng)</div> </body> </html>轉(zhuǎn)載于:https://www.cnblogs.com/tangshiguang/p/6759139.html
總結(jié)
以上是生活随笔為你收集整理的haslayout详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （转载）VS2010/MFC编程入门之五
- 下一篇： Service的线程、工作线程、权限及系