inline-block属性还是非常有用的,但是在IE6 7下还是有那么点问题,现总结一下
在IE6 7下实际上对行内元素起作用但对块级元素就失去了它的作用,上代码
IE6 7未起到效果
[img]http://dl.iteye.com/upload/attachment/553209/61248181-6e92-3aa3-9114-756715fd2d4f.jpg[/img]
firefox chrome下正常显示
[img]http://dl.iteye.com/upload/attachment/553211/6a4500dc-2c10-3ff9-a7f4-16ae2014c032.jpg[/img]
而对于行内元素IE6 7下可以实现inline-block
[img]http://dl.iteye.com/upload/attachment/553213/2c2b90b2-6184-3de7-ae5f-b20cd30dff3e.jpg[/img]
如果想在IE6 7下让块级元素也显示inline-block需要用到一下hack技术
[img]http://dl.iteye.com/upload/attachment/553215/63575b03-996d-32ae-a880-8b8c653a43b7.jpg[/img]
zoom:1 是为了触发IE6 7 下的hasLayout属性,主要用于盒子模型解析的时候,这样就可以设置他的宽度和高度了。
关于float,主要以前不理解在元素浮动之后元素的显示方式即display方式,当元素浮动之后元素的display属性就变为类似于inline-block,所以在行内元素浮动之后可以设置他的高度,宽度
[img]http://dl.iteye.com/upload/attachment/553224/cb0441d3-a84a-356b-9677-2b4d82090ac6.jpg[/img]
在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未起到效果
[img]http://dl.iteye.com/upload/attachment/553209/61248181-6e92-3aa3-9114-756715fd2d4f.jpg[/img]
firefox chrome下正常显示
[img]http://dl.iteye.com/upload/attachment/553211/6a4500dc-2c10-3ff9-a7f4-16ae2014c032.jpg[/img]
而对于行内元素IE6 7下可以实现inline-block
[img]http://dl.iteye.com/upload/attachment/553213/2c2b90b2-6184-3de7-ae5f-b20cd30dff3e.jpg[/img]
如果想在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>
[img]http://dl.iteye.com/upload/attachment/553215/63575b03-996d-32ae-a880-8b8c653a43b7.jpg[/img]
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>
[img]http://dl.iteye.com/upload/attachment/553224/cb0441d3-a84a-356b-9677-2b4d82090ac6.jpg[/img]