博客 - html/css/xml/xsl

也来说说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-aligntop;
width:auto的值;
height:auto的值;
}

推荐阅读:

模拟兼容性的 inline-block 属性

跨浏览器的inline-block

标签:

写下您的看法

  • :em02:
  • :em12:
  • :em01:
  • :em03:
  • :em10:
  • :em18:
  • :em06:
  • :em07:
  • :em13:
  • :em08:
  • :em11:
  • :em17:
  • :em16:
  • :em05:
  • :em15:
  • :em09:
  • :em14:
  • :em04:

仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签