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>轉載于:https://www.cnblogs.com/tangshiguang/p/6759139.html
總結
以上是生活随笔為你收集整理的haslayout详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （转载）VS2010/MFC编程入门之五
- 下一篇： Omi框架学习之旅 - 插件机制之omi