我是打酱油的文本
/* 暴力隐藏 */
.hide_display{display:none;}
| CHROME | FIREFOX | OPERA | SAFARI | IE | ||||
|---|---|---|---|---|---|---|---|---|
| 版本 | 5 | 3.6 | 10.10 | 4 | 6 | 7 | 8 | |
| 支持情况 | Y | Y | Y | Y | Y | Y | Y | |
我是一号打酱油的文本我是二号打酱油的文本
我是三号打酱油的文本
/* 隐藏元素,脱离文本流,使元素不影响其他元素 */
.hide_overflow{
height:0px;
overflow:hidden;
display:block;/* 行内元素需要 */
float:left; /* 脱离文档流 或者position:absolute;*/
}
/* 定位在可视范围外,脱离文本流,使元素不影响其他元素 */
.hide_position{
position:absolute;
left:-32767px;
}
/* 原理与.hide_position一样*/
.hide_visibility{
visibility:hidden;
position:absolute; /* 脱离文档流 */
margin-left:-32767px;
}
| CHROME | FIREFOX | OPERA | SAFARI | IE | ||||
|---|---|---|---|---|---|---|---|---|
| 版本 | 5 | 3.6 | 10.10 | 4 | 6 | 7 | 8 | |
| 支持情况 | Y | Y | Y | Y | Y | Y | Y | |
我是打酱油的超链接二号
.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;
}
| CHROME | FIREFOX | OPERA | SAFARI | IE | ||||
|---|---|---|---|---|---|---|---|---|
| 版本 | 5 | 3.6 | 10.10 | 4 | 6 | 7 | 8 | |
| 支持情况 | Y | Y | Y | Y | Y | Y | Y | |
我是擦不掉牛皮癣
.hide_fs{
font-size:0;
}
| CHROME | FIREFOX | OPERA | SAFARI | IE | ||||
|---|---|---|---|---|---|---|---|---|
| 版本 | 5 | 3.6 | 10.10 | 4 | 6 | 7 | 8 | |
| 支持情况 | N | Y | Y | N | N | N | N | |
/* 设定高度,利用行高将文本撑到容器可视范围外 */
.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支持 */
}
| CHROME | FIREFOX | OPERA | SAFARI | IE | ||||
|---|---|---|---|---|---|---|---|---|
| 版本 | 5 | 3.6 | 10.10 | 4 | 6 | 7 | 8 | |
| 支持情况 | Y | Y | Y | Y | Y | Y | Y | |
我是可访问性的化身
.hide_bg{
width:200px;
height:20px;
position:relative;
display:block;/* 行内元素需要 */
}
.hide_bg .front_bg{
background:url('bg_text.png') no-repeat; /* 背景内容等于或大于容器大小 */
position:absolute; /* 绝对定位,不影响文本 */
left:0px;
top:0px;
width:200px; /* 与父元素等宽高 */
height:20px;
display:block;
/* cursor:pointer; ie6和链接需要用 */
}
| CHROME | FIREFOX | OPERA | SAFARI | IE | ||||
|---|---|---|---|---|---|---|---|---|
| 版本 | 5 | 3.6 | 10.10 | 4 | 6 | 7 | 8 | |
| 支持情况 | Y | Y | Y | Y | Y | Y | Y | |
也许我才是最合适的,谁知道呢,内容表现分离。只有opera支持
.hide_ct{
content:"";
}
| CHROME | FIREFOX | OPERA | SAFARI | IE | ||||
|---|---|---|---|---|---|---|---|---|
| 版本 | 5 | 3.6 | 10.10 | 4 | 6 | 7 | 8 | |
| 支持情况 | N | N | Y | N | N | N | N | |