display:inline-block的应用两例

说明|评论

一、ICON

箭头1箭头2

箭头3

,虽然你看到的是三个箭头,但是实际上它们是通过CSS用图片替换文字来实现的,其markup是
<i class="arrow-1 replacement">箭头1</i>
<a href="http://dancewithnet.com" class="arrow-2 replacement">箭头2</a>
<p class="arrow-3 replacement">箭头3</p>
利用{display:inline-block;}的特性可以实现行内元素具有固定的高度,这一属性已经在FireFox3 beta、IE8 beta、Opera、Safari中得到广泛的支持,IE6/7中可以利用{display:inline;zoom:1}等方法模拟,Firefox2中需要用其专有属性{display:-moz-display-box;}或{display:-moz-display-stack;} ,利用{text-indent:-9999px;overflow:hidden;}来隐藏inline-block元素中溢出的文字,但是Firefox2下需要再加上{font-size:0;},然后利用background属性来实现图片的显示。

二、导航

后面是一个导航。

前面是一个导航。