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





Document



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





Document



测试inline-block用

【3】解决在IE7-浏览器下LI4px空隙bug(IE7-浏览器下li有高度或宽度或zoom:1,且仅包含内联元素,且内联元素被设置为display:block,li下会多出3px的垂直间距)





Document



  • 1231
  • 1232

【4】触发浮动元素的父级的hasLayout,浮动元素会被layout元素自动包含,相当于IE7-浏览器下实现清浮动





Document



测试浮动

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

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

(在线学习,8个月时间,目前就业,广州工作,月薪16k)

你可能感兴趣的:(haslayout详解)