兼容性:
優(yōu)點:
- 方便、快捷
- 不希望屏幕閱讀器讀取的內(nèi)容可以使用visibility
缺點:
- 超鏈接不適用
- 圖片替代文本需要其他標(biāo)簽的背景
3. 體驗損失:text-indent負(fù)值
代碼片段:
(x)HTML
<p class="hide_tex"><a href="#">我是打醬油的超鏈接一號</a></p> <a class="hide_tex_span" href="#"><span>我是打醬油的 超鏈接二號</span></a> <!--全英文字符在IE下不能被隱藏 --> <input class="hide_tex_input" type="submit" /> <input class="hide_tex_input" type="submit" /> <button class="hide_tex_input">我是打醬油的文本 btn</button>
CSS
.hide_tex a, .hide_tex_span{ text-indent:-32767px; display:block; /* text-indent適用塊狀元素中行內(nèi)元素和 文本節(jié)點 */ /* 演示需要 */ 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; }
兼容性:
優(yōu)點:
缺點:
- FF的虛邊問題
- text-indent容易產(chǎn)生bug
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 { hide_text } CSS文字隱藏總結(jié)報告 [1] 下一頁 { hide_text } CSS文字隱藏總結(jié)報告 [3]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。
|