display:inline-block的应用两例

CSS的display有属性值inline-block{display:inline-block;}，下面是应用其来实现用图片替代文字的两个例子：

请看。

Markup：

<i class="arrow-1 replacement">箭头1</i><a href="" class="arrow-2 replacement">箭头2</a><p class="arrow-3 replacement">箭头3</p>

CSS：

/* start:arrow */.replacement{ display:inline-block;/* Firefox3 beta、IE8 beta、Opera、Safari支持*/ display:-moz-inline-stack;/* Firefox的私有属性，也可以用-moz-inline-box */ *display:inline; zoom:1;/* 这两行，激活IE6/7的layout，实现类似效果 */ line-height:9999em; overflow:hidden;/* 上面两行，隐藏因设置容器大小而溢出的文字，对Firefox2无效 */ font-size:0;/* 解决上面两行代码在Firefox2下无法隐藏溢出文字*/ /* * 上面是综合怿飞给出清除溢出文字新方法后的方案，下面是以前的方案 */ text-indent:-9999px; /* 隐藏文字，Safari和Opera下无法仅用{font-size:0;}来解决 */ overflow:hidden;/* 上面两行，隐藏因设置容器大小而溢出的文字，对Firefox2无效 */ font-size:0;/* 解决上面两行代码在Firefox2下无法隐藏溢出文字(谢谢怿飞)*/ *text-indent:0; /* 解决IE6/7下text-indent:-9999px的bug， <p><a style="text-indent:-9999px;" class="replacement">箭头</a>文字</p> 相当于 <p style="text-indent:-9999px;"><a class="replacement">箭头</a>文字</p> 导致整段文字的消失，而当该链接前面有文字时则没有问题，如： <p>文字<a class="replacement" style="text-indent:-9999px;">箭头</a>文字</p> */ line-height:0;/* 解决{text-indent:0;font-size:0;}时，IE下文字还留下一条横线的bug */ vertical-align:middle;display:block; /* 因为Firefox2的原因，配合里面的i标签，用来实现文本的隐藏。 如果用注释部分的任意一个，可以删掉.replacement中的text-indent:-9999px; */}.arrow-1{}.arrow-2{ width:8px; background-position:0 -500px;}.arrow-3{ width:14px; background-position:0 -580px;}.only-ff2{ padding-left:9999px; /* 解决单标签下Firefox2下无法隐藏文本问题， 但是对其他版本浏览器都造成巨大影响，不可取 */}/* end:arrow */

上面的一个较复杂的应用。

在这个应用中可以发现-moz-inline-box和-moz-inline-stack的区别，比如把例二中-moz-inline-stack改成-moz-inline-stack。在实际应用中-moz-inline-box会存在元素间的对齐等问题，虽然Firefox还有一个私有属性-moz-box-align来帮助解决对齐问题，但依旧难以预料问题多多，而相对来说-moz-inline-stack的表现更像inline-block，这点可以在Firefox3中测试出来。但-moz-inline-stack使用时也会有一个bug，如果一个{display:-moz-inline-stack;}的元素外层元素是{display:inline;}即会使Firefox中其包含的链接不可点，这个需要用{position:relative;}来解决（谢谢乌龙茶）：

ul.pagination{ display:inline;}ul.pagination li{ display:inline-block; display:-moz-inline-stack; *display:inline; zoom:1; *margin:0 3px; vertical-align:middle; _vertical-align:bottom; position:relative; /* 解决因为ul的{display:inline;}问题导致Firefox中li里面的链接不可点的bug */ *position:static; /* 解决因为IE6中因为上一行代码带来在{position:relative}容器中移位在bug */}