当前位置: 代码迷 >> Web前端 >> 关于float跟inline-block
  详细解决方案

关于float跟inline-block

热度:353   发布时间:2012-09-18 16:21:42.0
关于float和inline-block
inline-block属性还是非常有用的,但是在IE6 7下还是有那么点问题,现总结一下
在IE6 7下实际上对行内元素起作用但对块级元素就失去了它的作用,上代码
<div style="display:inline-block;border:1px solid red;width:100px;height:100px;">div1</div>
<div style="display:inline-block;border:1px solid blue;width:100px;height:100px;">div2</div>

IE6 7未起到效果

firefox chrome下正常显示


而对于行内元素IE6 7下可以实现inline-block


如果想在IE6 7下让块级元素也显示inline-block需要用到一下hack技术
<div style="display:inline-block;*display:inline;*zoom:1;border:1px solid red;width:100px;height:100px;">div1</div>
		<div style="display:inline-block;*display:inline;*zoom:1;border:1px solid blue;width:100px;height:100px;">div2</div>



zoom:1 是为了触发IE6 7 下的hasLayout属性,主要用于盒子模型解析的时候,这样就可以设置他的宽度和高度了。

关于float,主要以前不理解在元素浮动之后元素的显示方式即display方式,当元素浮动之后元素的display属性就变为类似于inline-block,所以在行内元素浮动之后可以设置他的高度,宽度
<span style="float:left;border:1px solid red;width:100px;height:100px;">span1</span>
		<span style="float:left;border:1px solid blue;width:100px;height:100px;">span2</span>


  相关解决方案