haslayout详解_html/css_WEB-ITnose

定义

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

默认触发hasLayout的标签　

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

触发hasLayout的CSS属性

　　【1】display:inline-blcok
　　【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

     Document  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;}                      

　　【2】配合display:inline让块元素模拟inline-block

     Document  body{    margin: 0;}.box{    width: 100px;    height: 100px;    background-color: red;    display:inline-block;    /*配合display:inline触发hasLayout*/    /*     float:left;    display:inline; */}   


      
查看更多关于haslayout详解_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109523