text-indent隱藏文字出現(xiàn)虛線框outline_Div+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 的呢?
示例代碼 [www.hl5o.cn]
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.
1. Outlines do not take up space.
2. Outlines may be non-rectangular.
把虛線框去掉了a:focus { outline:0 } ,究竟這個(gè)問(wèn)題只存在 Firefox 中。
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
猜你也喜歡看這些
- 仿谷歌google的搜索框下拉提示列表效果
- Div CSS實(shí)例:如何用CSS實(shí)現(xiàn)背景半透明效果
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- 用背景圖片實(shí)現(xiàn)CSS柱狀圖表一例
- DIV CSS布局入門示例(五)border和clear
- CSS圖片放大展示的一種小思路
- 用css制作有滾動(dòng)條的居中彈出框
- DIVCSS橫向菜單實(shí)例:簡(jiǎn)單的思路陷下的風(fēng)格不錯(cuò)的效果
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- CSS網(wǎng)站風(fēng)格設(shè)計(jì)實(shí)例HuDong123
- 相關(guān)鏈接:
- 教程說(shuō)明:
Div+CSS教程-text-indent隱藏文字出現(xiàn)虛線框outline
。