中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

{ hide_text } CSS文字隱藏總結報告

最近整理的一份CSS文字隱藏的demo，總結了幾種方法，希望得出一種最完美的方案放進自己的代碼片段，可是，到最后卻陷入一種重復不斷地推翻結論的境地。因為需要考慮的應用場景和元素實在太多，放下瀏覽器不談，不同的應用終端，不同的標簽結構會有不一樣的最優(yōu)方案，因此，與其希望在工作上多“偷一些懶”，不如平常多鞏固積累基礎的知識，在需要權衡的時候，便能更加得心應手。

因為自己經(jīng)驗尚淺，demo部分難免會有錯漏情況，如發(fā)現(xiàn)問題，望大家能指出。

方法列表 demo

1.   毫無保留：display:none

代碼片段：

(x)HTML

<p class="hide_display">我是打醬油的文本</p>

CSS

/* 暴力隱藏 */
.hide_display{display:none;}

兼容性：

優(yōu)點：

• 方便、快捷
• 兼容性好

缺點：

• 屏幕閱讀器無法閱讀
• 超鏈接不適用
• 圖片替代文本需要其他標簽的背景
• 影響搜索排名
• 大量使用容易被認為是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;
}

出處：藍色理想
責任編輯：bluehearts

上一頁 下一頁 { hide_text } CSS文字隱藏總結報告 [2]

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。