哪些情况下需要CSS隐藏文字？

　　今天在做一个页面的时候，遇到一个常见的问题，切图是否连文字一起切了。如果只切背景，文字的效果用css无法实现;如果连文字一起切，文本就为空，这样在抛开css裸奔的情况下就不能很顺利的汲取到页面信息，不利于SEO。

　　所以就想到了，连文字一起切，用css隐藏文字的解决办法。还有一种常见的需要隐藏文字的，就是文字的字段长度超出了容器的宽度，需要隐藏。以前写过解决办法：[点击]。这里说下第一种情况的解决方法。

　　1.在容器里面加个标签span，然后用display:none;兼容性比较好。但是会多个标签，如果循环使用的话，会多一堆html代码，单个图片或者按钮推荐使用。

　　如果是要隐藏input 的value用这种方法就不好实现。所以就有了第二种方法：

　　2.使用text-indent：-9999px;

　　它也有个局限性，就是只能用于块状元素(block)，如果我们想偏移掉a上的字体，问题就出来了：为了偏移文字要改变a的 为block，这样a后面的元素要到下一行了，要再用float来避免，这样未免有点麻烦。

　　3.下面这种方法自己比较常用：

　　line-height:0;

　　font-size:0;

　　overflow:hidden;

　　能完美“隐藏”掉你background之上的字体，兼容性也比较好，经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过。

　　当然要根据具体的情况，没有最好的只有最合适的。

评论总数：0 条 [ 查看全部 ] 网友评论