CSS教程:text-indent隱藏文字出現(xiàn)虛線框outline_CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
鏈接用圖片做背景,text-indent:-9999px; 隱藏文字,此效果在 IE 中是正常的,但在 Firefox 里,鼠標(biāo)點(diǎn)擊該鏈接時(shí),虛線框卻會(huì)包住被縮進(jìn)的文字,結(jié)果顯示為虛線框 N 長(zhǎng)。
因?yàn)槠綍r(shí)是用overflow:hidden; 屬性的,所以一直也沒(méi)有注重到這個(gè)問(wèn)題的存在,但當(dāng)你需要使用 JS 來(lái)實(shí)現(xiàn)某種交互時(shí),強(qiáng)烈建議不要使用 overflow:hidden; 屬性,因?yàn)闀?huì)給你帶來(lái)很多意想不到的麻煩。
虛線框,其實(shí)就是 CSS 中的 outline 屬性,這也說(shuō)明 IE 和 Firefox 對(duì)于 outline 和 border 的解析范圍并不一致:IE 認(rèn)為虛線框就是border的邊緣,而 Firefox 則認(rèn)為虛線框應(yīng)該是文字范圍。
那 W3C 中是如何定義 outline 的呢?
| At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields, image maps, etc., to make them stand out. CSS2 outlines differ from borders in the following ways: 1. Outlines do not take up space. 2. Outlines may be non-rectangular. |
把虛線框去掉了a:focus { outline:0 } ,究竟這個(gè)問(wèn)題只存在 Firefox 中。
相關(guān)CSS教程:
CSS教程Rss訂閱Div+Css教程搜索
CSS教程推薦
猜你也喜歡看這些
- 深層優(yōu)化 提高網(wǎng)站的訪問(wèn)速度的一些技巧
- XHTML教程,簡(jiǎn)單認(rèn)識(shí)XHTML基礎(chǔ)知識(shí)
- HTML表格標(biāo)記教程(16):標(biāo)題水平對(duì)齊屬性ALIGN
- 容易讓人迷惑的alt和title
- XHTML教程:如何去除鏈接虛線框?
- HTML表格標(biāo)記教程(41):表頭的寬度和高度屬性WIDTH、HEIGHT
- HTML表格標(biāo)記教程(9):單元格間距屬性CELLSPACING
- CSS網(wǎng)頁(yè)布局中HTML標(biāo)簽的語(yǔ)義(二)
- 通過(guò)實(shí)例掌握BR和P標(biāo)簽的區(qū)別
- DIV CSS布局基礎(chǔ):HTML標(biāo)記(三)
- 相關(guān)鏈接:
- 教程說(shuō)明:
CSS教程-CSS教程:text-indent隱藏文字出現(xiàn)虛線框outline
。