栏目导航
热点推荐
- 3个简单却重要的CSS技巧
- css基础:熟悉了解盒子模型(box m
- CSS Hack兼容各浏览器是否正常
- 最常用的12种CSS BUG解决方法与
- [分享]我的css hack观点
- CSS实例教程:分号引起页面混乱
- CSS教程:认真学习haslayout
- CSS教程:编写CSS代码时样式命名
- 如何在CSS中设定文本的尺寸
- CSS教程:CSS定位属性
- 新窗口打开超链接的正确方法
- 轻松搞定IE的CSS制作网页技巧3则
阅览排行
哪些情况下需要CSS隐藏文字?
www.jz123.cn 2009-08-28 来源: woaicss.com 责任编辑(袁袁) 我要投递新闻
今天在做一个页面的时候,遇到一个常见的问题,切图是否连文字一起切了。如果只切背景,文字的效果用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 通过。
当然要根据具体的情况,没有最好的只有最合适的。
上一篇:10个最经常犯得HTML标签错误 下一篇:CSS 3 灵活的 Box Model