方式一：文字缩进

1
2
3
.div {
    text-indent:-9999px;
}

方式二：字体大小

1
2
3
.div {
    font-size: 0;
}

此方式在没有给容器设置height 或者行高的情况下，设置font-size:0,则容器将无高度

方式三：设置padding撑开容器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="btn">
    <a class="btn_download" href="#" title="下载">下载</a>
</div>
<style type="text/css">
    .btn { 
        width: 55px;
        height: 22px;
        overflow: hidden;
    }
    .btn_download {
        display: inline-block;
        width: 55px;
        height: 22px;
        padding-top: 22px;
        background: url(btn_download.gif) no-repeat;
        text-align: center;
    }
</style>

letter-spacing+first-letter

  1. 此方法兼容IE6+, 适用于inline-block水平元素，且适用于button元素，不过，需要是下面这种写法
1
2
3
<button type="button/submit">按钮</button>
而不能是这样子：
<input type="button/submit" value="按钮" />
  1. 此方法受text-align属性影响

text-align:left;letter-spacing+first-letter的margin使用负值，
text-align:right;letter-spacing+first-letter的margin需要使用正值。
值的大小其实没有定值。一般，letter-spacing绝对值大于2em可以，首字符margin可以大一些，demo中是-20em.

  1. 多个:first-letter伪元素不要使用逗号分隔，貌似会全部失效，应分开写使用逗号分隔的时候逗号前面一定要留一个空格。否则，IE6浏览器会忽略这条声明：
1
2
3
4
5
6
7
8
9
.btn:first-letter,
.img:first-letter {
    margin-left: -20em;
}

.btn:first-letter ,    /* 逗号前需有1个空格 */
.img:first-letter {
    margin-left: -20em;
}
  1. 可放到公共样式中，单独调用
1
2
3
4
5
6
7
8
.notext {
    text-align: left;
    letter-spacing: -3em;
    overflow: hidden;
}
.notext:first-letter {
    margin-left: -20em;
}

转载申请

本作品采用知识共享署名 4.0 国际许可协议进行许可，转载时请注明原文链接，文章内图片请保留全部内容。