DIV教程之比来收拾的一份CSS笔墨埋没的demo
表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。破洛洛文章简介：CSS笔墨埋没总结呈报.
{hide_text}CSS笔墨埋没总结呈报
比来收拾的一份CSS笔墨埋没的demo，总结了几种办法，但愿得出一种最完善的计划放进本人的代码片断，但是，到最初却堕入一种反复不休地颠覆结论的地步。由于必要思索的使用场景和元素其实太多，放下扫瞄器不谈，分歧的使用终端，分歧的标签布局会有纷歧样的最优计划，因而，与其但愿在事情上多“偷一些懒”，不如寻常多牢固堆集基本的常识，在必要衡量的时分，便能加倍轻车熟路。
由于本人履历尚浅，demo部分不免会有讹夺情形，如发明成绩，看人人能指出。
办法列表demo
1.毫无保存：display:none
代码片断：
(x)HTML
<pclass="hide_display">我是打酱油的文本</p>
CSS
/*暴力埋没*/
.hide_display{display:none;}
兼容性：
长处：
[*]便利、快速
[*]兼容性好
弱点：
[*]屏幕浏览器没法浏览
[*]超链接不合用
[*]图片替换文本必要其他标签的背景
[*]影响搜刮排名
[*]大批利用简单被以为是SEO做弊
2.折衷选择：overflow:hidden/position:absolute/visibility:hidden
代码片断：
(x)HTML
<spanclass="hide_overflow">我是一号打酱油的文本</span>
<pclass="hide_position">我是二号打酱油的文本</p>
<pclass="hide_visibility">我是三号打酱油的文本</p>
CSS
破洛洛文章简介：CSS笔墨埋没总结呈报.
兼容性：
长处：
[*]便利、快速
[*]不但愿屏幕浏览器读取的内容可使用visibility
弱点：
[*]超链接不合用
[*]图片替换文本必要其他标签的背景
3.体验丧失：text-indent负值
代码片断：
(x)HTML
<pclass="hide_tex"><ahref="#">我是打酱油的超链接一号</a></p>
<aclass="hide_tex_span"href="#"><span>我是打酱油的
超链接二号</span></a>
<!--全英笔墨符在IE下不克不及被埋没-->
<inputclass="hide_tex_input"type="submit"/>
<inputclass="hide_tex_input"type="submit"/>
<buttonclass="hide_tex_input">我是打酱油的文本
btn</button>
CSS
兼容性：
长处：
[*]合用超链接的图片替换
弱点：
[*]FF的虚边成绩
[*]text-indent简单发生bug
破洛洛文章简介：CSS笔墨埋没总结呈报.
4.牛皮癣：font-size设零
代码片断：
(x)HTML
<pclass="hide_fs">我是擦不失落牛皮癣</p>
<buttonclass="hide_fs">我是打酱油的文本btn</button>
<inputclass="hide_fs"type="submit"/>
CSS
.hide_fs{font-size:0;}
兼容性：
长处：
[*]便利、快速
弱点：
[*]扫瞄器体现纷歧致，ie,safari有最小字号，chrome最小12px，ff不显现文本
[*]合用情况少
5.强强团结：line-height三倍
代码片断：
(x)HTML
<pclass="hide_lh"><ahref="#">今朝为止被一般人类广泛承受的疑似最完善埋没笔墨计划，传说是tommy创造的</a></p>
<!--line-height在ff3.6的button没法埋没文本，必要共同
其他体例-->
<buttonclass="hide_lh_btn">我是打酱油的文本
btn</button>
<!--line-height在ff3.6、opera的input没法埋没文本，需
要共同其他体例-->
<inputclass="hide_lh_btn"type="submit"/>
<!--今朝对照完美的计划-->
<inputclass="hide_lh_btn_final"type="submit"/>
CSS
/*设定高度，使用行高将文本撑到容器可视局限外*/
.hide_lha,.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撑持*/
}
破洛洛文章简介：CSS笔墨埋没总结呈报.
兼容性：
长处：
[*]兼容性好
[*]超链接和图片替换文本可用
弱点：
[*]利用限定较年夜，必要定宽高
[*]多一丁点：前置背景遮挡
代码片断：
(x)HTML
<!--在css有效和css无效图片有效都合用-->
<aclass="hide_bg"href="#"><span
class="front_bg"></span>我是可会见性的化身</a>
CSS
.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和链接必要用*/
}
兼容性：
长处：
[*]兼容性好
[*]超链接和图片替换文本可用
[*]可会见性强
弱点：
[*]利用限定较年夜，必要定宽高
[*]代码冗余，必要空标签
[*]另辟门路：content:”"
代码片断：
(x)HTML
<!--只要opera撑持，按界说只能用在:before和:after-->
<aclass="hide_ct"href="#">大概我才是最符合的，谁晓得呢，内容体现分别。只要opera撑持</a>
CSS
.hide_ct{content:"";}
兼容性：
长处：
[*]复杂
弱点：
[*]内容款式分别
[*]不有用
原文：http://caib.me/hide-text/
.hide_texa,.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;
}
/*埋没元素，离开文本流，使元素不影响其他元素*/
.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;
}
</p>
大大缩减页面代码，提高页面浏览速度,缩减带宽成本; 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 学Dreamweaver技术的过程其实是一个增加信心的过程。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。
页:
[1]