hasLayout是IE为解析盒模型而设计的一个专有属性,它的设计初衷是用于块级元素的,如果触发行内元素的hasLayout,就会让行内元素拥有一些块级元素的特性。
display:inline-block 有width,height,margin,padding 却不独占一行,很好
但IE6,7不支持inline-block,inline-block只能触发IE6,7下行内元素的hasLayout
即:IE6,7下,设置inline-block的块级元素:白设
行内元素:可设width,height... 效果同zoom:1
例:abcde<span>12345</span> span{display:inline-block;height:30px;width:100px;background:#ccc;}
ie6/7
ie8/ff
为兼容顶对齐:span{*vertical-align:-10px;_vertical-align:-10px;} 值根据需要自己设
img button很超然,可设长宽但却不独占一行
*****************************************************************************************************************************
position:relative absolute都可以激活left top rigth bottom 和 z-index属性
文档流:元素根据自己的display类型、长宽、内外边距等属性顺序排列在z-index:0这一层里。
relative absolute都会让元素浮起来,z-index>0
relative 会保留自己在z-index:0层的点位,left top ... 都是相对自己原有的位置
absolute 不保留自己原来位置,left top ... 是相对于距自己最近的一个设置了relative或absolute的祖先元素的位置偏移。找不到祖宗就找body
float仍然让元素在z-index:0层流动,会改变正常的文档流,影响周围元素。
relative 不会改变元素display类型;absolute和float会让元素以inline-block方式显示。再显示地设置display为inline/block也无效。
{float:left; display:inline}可解决IE6双边距问题