css报告总结,{ hide_text } CSS文字隐藏总结报告(3)

4.   牛皮癣：font-size设零

代码片段：

(x)HTML

我是擦不掉牛皮癣

我是打酱油的文本btn

CSS

.hide_fs{ font-size:0; }

兼容性：

优点：

方便、快捷

缺点：

浏览器表现不一致，ie,safari有最小字号，chrome最小12px，ff不显示文本

适用环境少

5.   强强联合：line-height三倍

代码片段：

(x)HTML

目前为止被正常人类普遍接受的疑似最完美隐藏文字方案，传说是tommy发明的

我是打酱油的文本

btn

  \

CSS

/* 设定高度，利用行高将文本撑到容器可视范围外 */

.hide_lh a, .hide_lh_btn{

width:200px;

height:20px;

overflow:hidden;

line-height: 60px;/* 行高最好设3倍或以上，chrome容易后漏 */

display:block;/* 行内元素需要 */

/* 演示需要 */

background-color:#ccc;

margin-left:300px;

}

.hide_lh_btn_final{ \

width:200px;

height:20px;

overflow:hidden;

line-height:60px;

display:block;

font-size:0px; /* opera和ff支持 */

}

.hide_tex a, .hide_tex_span{

text-indent:-32767px;

display:block; /* text-indent适用块状元素中行内元素和

文本节点 */

/* 演示需要 */

width:200px;

height:20px;

margin-left:300px;

background-color:#ccc;

/* outline:none; 不建议隐藏outline，键盘流选手无法操作 */

}

.hide_tex_input{

text-indent:-32767px;

width:200px;

height:50px;

display:block;

}