兼容所有浏览器(包括ie6,ie7) 使用inline-block的方法:
第一种,针对于inline水平的行内元素(如a,span等),
span{
display:inline-block;
}
第二种,针对于 块元素(如div等)
div{
display: inline-block;
*display: inline;
zoom: 1;
}
备注:
IE6/IE7不支持inline-block,但它可以触发hasLayout,IE6/IE7对inline-block的实现就是一种hack----触发行内元素的hasLayout,
hasLayout 是 IE浏览器为解析盒模型而设计的一个专有属性,它的初衷是用于块级元素的。
IE6/IE7的hash其效果和zoom:1是一样的,但为了和其它浏览器一致,还是以display:inline-block实现,
还有一个问题,会出现inline-block两个的底对齐,而IE8+及其它浏览器的是顶对齐,可通过span的vertical-align解决。如:{display:inline-block;*vertical-align:-10px;}
另:display:inline-block == position:absolute;float:left;(or right)