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

请看例一。

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>

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;/* 行内垂直居中，对Opera有特殊意义，其和文字混排偏移有点离谱 */

    /*default for arrow-1*/
    width:6px;
    height:12px;
    background:url(signs.png) no-repeat 0 -360px;
}
.replacement i{
    /*display:none;*/
    /*visibility:hidden;*/
    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 */
}

更多Firefox的私有属性可以看CSS Reference:Mozilla Extensions和Mozilla CSS Extensions。

标签：-moz-inline-box, -moz-inline-stack, CSS, Firefox, Firefox2, inline-block

作者：秦歌，时间:2008-04-05 9:17，归纳于：HTML & CSS，订阅：RSS 2.0，引用：Trackback

« 印象西湖

闭上眼睛，WEB就不存在了吗？ »