CSS教程:text-indent隱藏文字出現(xiàn)虛線框outline
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:26:54 作者:佚名
我要評(píng)論

鏈接用圖片做背景,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)你需要
鏈接用圖片做背景,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實(shí)現(xiàn)outline切換的動(dòng)畫效果
這篇文章主要介紹了使用CSS實(shí)現(xiàn)outline切換的動(dòng)畫效果,作者展示了一個(gè)應(yīng)用于注冊(cè)框中的方框自動(dòng)切換位置的例子,需要的朋友可以參考下2015-06-24利用CSS3實(shí)現(xiàn)圓角的outline效果的教程
這篇文章主要介紹了利用CSS3實(shí)現(xiàn)圓角的outline效果的教程,一般用于實(shí)現(xiàn)相框效果,需要的朋友可以參考下2015-06-05css去掉點(diǎn)擊連接時(shí)所產(chǎn)生的虛線邊框技巧兼容符合w3c標(biāo)準(zhǔn)的瀏覽器
可能很多人不大會(huì)注意,當(dāng)點(diǎn)擊一個(gè)鏈接時(shí)會(huì)出現(xiàn)一個(gè)虛線框,其實(shí)也沒(méi)什么影響,可以忽略,但有時(shí)候有人會(huì)提出想把這個(gè)虛線框隱藏掉,該用什么方法做?2011-10-18- 輪廓是繪制于元素周圍的一條線,位于邊框邊緣的外圍,可起到突出元素的作用,這篇文章主要介紹了CSS輪廓outline的具體使用的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,2018-04-08