隐藏文字用图片代替方案

 

<style><!--
        .box {
            width: 100px;
            height: 100px;
            position: relative;
            /*text-indent: -999em;
            line-height: 999em;
            vertical-align: middle;            
            font-size: 0;
            line-height: 0;
            -webkit-text-size-adjust: none;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1;            
            background: url(http://img02.taobaocdn.com/tps/i2/T1yMr0XmxaXXX5Ovs7-800-600.png) no-repeat;
            */
        }
        
        .box i {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: url(http://img02.taobaocdn.com/tps/i2/T1yMr0XmxaXXX5Ovs7-800-600.png) no-repeat;            
        }
    
--></style>
<p><a class="box" href="#">我是内容更</a></p>

 

 

看到马老板做的一个新的项目里面在预览的情况下是文字发布了是图片。感觉好奇就问了一下。马老板细心的 讲解了一番。

以前的时候用 text-indent:-999em来隐藏文字的时候在ie7下面不知道是没有注意还是长时间没有遇到过了就忘记了这个bug。

马老板提供的四种解决方案：

1.给元素添加超高的行高隐藏文字

text-indent: -999em;
            line-height: 999em;
            vertical-align: middle;  

 

2.给元素不要行高和文字大小解决bug

font-size: 0; line-height: 0; -webkit-text-size-adjust: none;

 

3.在html里面前面加上一个空行

&nsbp;<a class="box" href="#">我是内容更</a>

4.用图片叠加

这种方案是力推的。再图片还没有加载的时候用户可以看到文字。读屏软件也能读出内容。

目前etao.com 大类文字也是用的这种方式。

 

今天还学习到了一点inline元素 如果用了定位属性设置了大小也会撑开。