{ hide_text } CSS笔墨潜匿总结陈诉

最近清算的一份CSS笔墨潜匿的demo，总结了几种要领，但愿得出一种最美满的方案放进本身的代码片断，然则，到最后却陷入一种一再不绝导倩醐结论的田地。由于必要思量的应用场景和元素其实太多，放下赏识器不谈，差异的应用终端，差异的标签布局会有纷歧样的最优方案，因此，与其但愿在事变上多“偷一些懒”，不如泛泛多固定蕴蓄基本的常识，在必要衡量的时辰，便能越发驾轻就熟。

由于本身履历尚浅，demo部门不免会有错漏环境，如发明题目，望各人能指出。

要领列表 demo

    1.   毫无保存：display:none

代码片断：
(x)HTML
<p class="hide_display">我是打酱油的文本</p> CSS
/* 暴力潜匿 */
.hide_display{display:none;}

兼容性：

利益：

• 利便、快捷
• 兼容性好

弱点：

• 屏幕阅读器无法阅读
• 超链接不合用
• 图片更换文本必要其他标签的配景
• 影响搜刮排名
• 大量行使轻易被以为是SEO作弊

    2.   折中选择：overflow:hidden/position:absolute/visibility:hidden

代码片断：

(x)HTML
<span class="hide_overflow">我是一号打酱油的文本</span> 
<p class="hide_position">我是二号打酱油的文本</p> 
<p class="hide_visibility">我是三号打酱油的文本</p> CSS
/* 潜匿元素，离开文本流，使元素不影响其他元素 */
.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; 
}

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!