技巧:display:inline-block使用详解

今天偶然看到display的inline-block这个属性,它的解释是:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

但在实际使用中,IE下面至少是IE6/7下面,会不起作用(下面会附图介绍DISPLAY各属性的不同浏览器的兼容性)。
但是可以利用IE下的小BUG实现此功能,下面请看代码:

行内加span用法:

测试行 加入INLINE-BLOCK元素 测试行

给DIV定义CSS用法:

必须得给标签定义2次CSS,顺序不能搞错,第一次定义inline-block属性,第二次定义inline属性。


下面附上DISPLAY的各属性的不同浏览器兼容分析图:

发表评论

电子邮件地址不会被公开。 必填项已用*标注