2008年12月29日星期一

display的inline和block和inline-block

IE下块元素实现 display:inline-block 的效果
有两种方法:
1、先使用 display:inline-block 属性触发块元素(触发layout),然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 声明中才有效果,这是 IE 的一个经典 bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout 不会消失)。代码如下(…为省略的其他属性内容):
div {display:inline-block;}
div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1 等)。代码如下:
div {display:inline; zoom:1;}
(要求设置!DOCTYPE)


ff也不支持inline-block(ff3已经支持了),详细细节Google吧,这个问题也是比较常见了...

没有评论: