也来说说inline-block
先看看demo,有了inline-block,就可以某种程度上代替了float啦!
支持的:FF3、IE8、Safari、Opera、Chrome
未支持的:IE6、IE7、FF2
下面我们就一一来解决它。
解决FF2:display: -moz-inline-stack 由于FF2未与display:inline-block“达成共识”!但有这一私有属性能顶顶也不错。
解决IE系列:display:inline 针对IE系列,切记需要触发layout,这里使用的是zoom:1。IE7下需要单独设置该值为inline,那么利用星号Hack干掉它!
至此这3个浏览器的兼容性得到解决,可惜的是,直接用于项目里是不放心的,等待着IE8的普及吧!不过及早的了解它未尝不是一桩妙事!
最后总结一下:
.box{
display: -moz-inline-stack; /* FF2 */
display:inline-block;
*display:inline; /* IE7 */
zoom:1; /* IE系列*/
vertical-align:top;
width:非auto的值;
height:非auto的值;
}
display: -moz-inline-stack; /* FF2 */
display:inline-block;
*display:inline; /* IE7 */
zoom:1; /* IE系列*/
vertical-align:top;
width:非auto的值;
height:非auto的值;
}
推荐阅读:
标签:inline-block,兼容性