CSS隐藏页面文字的几种方式总结
方式一:text-indent:-9999px
不多说,ext-indent负值为最常用方法,然问题有三:
1.较大的负值有性能问题,例如新浪/腾讯微博提交按钮的-9999em,大概12~16万像素的宽度,相对于100个显示器宽度,在低配Android pad上,尤其含动画效果的时候,会直接卡爆;
2.FireFox浏览器下虚框。其实问题不大,overflow:hidden可修复;
3.不能应用在IE6/IE7伪inline-block水平元素上,否则元素会被text-indent拐走。
即使有人提出:
除了性能有所缓解,后面两个问题依旧存在。
方式二:font-size:0
此方式在没有给容器设置height 或者行高的情况下,设置font-size:0,则容器将无高度
方式三:设置padding,撑开容器
CSS Code 复制内容到剪贴板 <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元素,不过,需要是下面这种写法
而不能是这样子:
CSS Code 复制内容到剪贴板 <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浏览器会忽略这条声明:
4.可放到公共样式中,单独调用
CSS Code 复制内容到剪贴板 .notext { text-align : left ; letter-spacing : -3em; overflow : hidden ; } .notext:first-letter { margin-left : -20em; }声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。