CSS隐藏页面文字的几种方式总结
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
方式一:text-indent:-9999px
不多说,ext-indent负值为最常用方法,然问题有三:
1.较大的负值有性能问题,例如新浪/腾讯微博提交按钮的-9999em,大概12~16万像素的宽度,相对于100个显示器宽度,在低配Android pad上,尤其含动画效果的时候,会直接卡爆;
2.FireFox浏览器下虚框。其实问题不大,overflow:hidden可修复;
3.不能应用在IE6/IE7伪inline-block水平元素上,否则元素会被text-indent拐走。
即使有人提出:
- { text-indent: 100%; white-spacing: nowrap; overflow: hidden; }
除了性能有所缓解,后面两个问题依旧存在。
方式二:font-size:0
此方式在没有给容器设置height 或者行高的情况下,设置font-size:0,则容器将无高度
方式三:设置padding,撑开容器
- <style type="text/css">
- .btn{height: 22px;width: 55px;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>
- <div class="btn">
- <a class="btn_download" href="#" title="下载">下载</a>
- </div>
方式四:letter-spacing+first-letter
1.此方法兼容IE6+, 适用于inline-block水平元素,且适用于button元素,不过,需要是下面这种写法
- <button type="button/submit">按钮</button>
而不能是这样子:
- <input type="button/submit" value="按钮" />
2.此方法受text-align属性影响。
text-align:left;letter-spacing+first-letter的margin使用负值,
text-align:right;letter-spacing+first-letter的margin需要使用正值。
值的大小其实没有定值。一般,letter-spacing绝对值大于2em可以,首字符margin可以大一些,demo中是-20em.
3.多个:first-letter伪元素不要使用逗号分隔,貌似会全部失效,应分开写使用逗号分隔的时候逗号前面一定要留一个空格。否则,IE6浏览器会忽略这条声明:
- .btn:first-letter,
- .img:first-letter {
- margin-left: -20em;
- }
- .btn:first-letter , /* 逗号前需有1个空格 */
- .img:first-letter {
- margin-left: -20em;
- }
4.可放到公共样式中,单独调用
- .notext {
- text-align: left;
- letter-spacing: -3em;
- overflow: hidden;
- }
- .notext:first-letter {
- margin-left: -20em;
- }
相关文章
- 这篇文章主要介绍了CSS隐藏文字的6种方法,均通过各种上浏览器测试,当然,你可以综合3种方法一起用,需要的朋友可以参考下2014-06-24
深入分析网页CSS隐藏文字和以图换字技术-CSS教程-网页制作-网页教学网
打开电脑,感觉没有什么事可做,就随便拿起《css mastery》翻了下,刚好看倒图像替换这块,突然想起前些天曾有一网友问过该问题,就想总结出来,以便自己和网友今后参考。2008-10-17CSS实现在文章每段后面加入带连接的隐藏文字-CSS教程-网页制作-网页教
代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接2008-10-17CSS教程:text-indent隐藏文字出现虚线框outline-CSS教程-网页制作-网页
链接用图片做背景,text-indent:-9999px; 隐藏文字,此效果在 IE 中是正常的,但在 Firefox 里,鼠标点击该链接时,虚线框却会包住被缩进的文字,结果显示为虚线框 N2008-10-17
最新评论