firefox的超鏈接點(diǎn)擊去除擴(kuò)大的難看虛線的解決方法
更新時(shí)間：2008年12月03日 16:26:51 作者：
在Firefox里，鼠標(biāo)點(diǎn)擊一個(gè)鏈接時(shí)，它的周?chē)闯霈F(xiàn)虛線畫(huà)出的邊框。這種例子遍地都是，在WordPress后臺(tái)寫(xiě)這個(gè)文章的時(shí)候，隨手點(diǎn)一下右邊那些widget，就看到了這個(gè)問(wèn)題（圖片的右上角）
在某些特殊的情況下，比如做一個(gè)導(dǎo)航菜單的時(shí)候，出現(xiàn)這個(gè)情況時(shí)效果就很糟糕了，因?yàn)镕irefox會(huì)錯(cuò)誤地?cái)U(kuò)大鏈接的邊框：
在Firefox的地址欄輸入about:config，回車(chē)。有一個(gè)配置項(xiàng)叫做“browser.display.focus_ring_width”，把它修改成0，點(diǎn)擊鏈接時(shí)就不會(huì)出現(xiàn)那個(gè)邊框。但這樣的話，在焦點(diǎn)落在按鈕上時(shí)也沒(méi)有了邊框指示。而且作為一個(gè)開(kāi)發(fā)者，在瀏覽器里設(shè)置這個(gè)屬性，無(wú)異于掩耳盜鈴。
這實(shí)際上是Firefox在<a>這個(gè)標(biāo)簽處于focus狀態(tài)時(shí)（pseudo selector - a:focus）給它加的outline屬性。
正確的解決辦法是在CSS里加一個(gè)規(guī)則：
a {
outline: none;
}
或者縮小范圍：
a:focus {
outline: none;
}
后者使得鼠標(biāo)左鍵在鏈接上按下，松開(kāi)之前的這段時(shí)間里，仍會(huì)顯示虛線的outline.
在我看到的大部分網(wǎng)站中，都把這條規(guī)則寫(xiě)在CSS里?；蛟SFirefox該考慮去掉這個(gè)的默認(rèn)outline.
在Firefox的地址欄輸入about:config，回車(chē)。有一個(gè)配置項(xiàng)叫做“browser.display.focus_ring_width”，把它修改成0，點(diǎn)擊鏈接時(shí)就不會(huì)出現(xiàn)那個(gè)邊框。但這樣的話，在焦點(diǎn)落在按鈕上時(shí)也沒(méi)有了邊框指示。而且作為一個(gè)開(kāi)發(fā)者，在瀏覽器里設(shè)置這個(gè)屬性，無(wú)異于掩耳盜鈴。
這實(shí)際上是Firefox在<a>這個(gè)標(biāo)簽處于focus狀態(tài)時(shí)（pseudo selector - a:focus）給它加的outline屬性。
正確的解決辦法是在CSS里加一個(gè)規(guī)則：
a {
outline: none;
}
或者縮小范圍：
a:focus {
outline: none;
}
后者使得鼠標(biāo)左鍵在鏈接上按下，松開(kāi)之前的這段時(shí)間里，仍會(huì)顯示虛線的outline.
在我看到的大部分網(wǎng)站中，都把這條規(guī)則寫(xiě)在CSS里?；蛟SFirefox該考慮去掉這個(gè)的默認(rèn)outline.
相關(guān)文章
從Table向Css過(guò)渡的優(yōu)缺點(diǎn)比較
從Table向Css過(guò)渡的優(yōu)缺點(diǎn)比較...2007-02-02
引用字體時(shí)圖標(biāo)無(wú)法顯示_字體文件不存在問(wèn)題
最近一個(gè)項(xiàng)目，css,js等靜態(tài)資源做了cdn部署，瀏覽網(wǎng)站時(shí)發(fā)現(xiàn)font?awesome字體圖標(biāo)通通不能正常顯示。只有一些奇怪的符號(hào)。瀏覽器控制臺(tái)報(bào)錯(cuò)信息：font-face引用字體跨域。2023-06-06
以圖換字的幾個(gè)方法及思路...2006-11-11
非常不錯(cuò)的對(duì)于ie hack的一些寫(xiě)法講解2008-11-11
html工作中表格<tbody>標(biāo)簽的使用技巧
公司大部分的項(xiàng)目都是基于BS結(jié)構(gòu)，UI設(shè)計(jì)階段做WEB原型頁(yè)面時(shí)要把各種交互效果實(shí)現(xiàn)出來(lái)，與真正的后臺(tái)編程不同，就用JS前臺(tái)編程來(lái)實(shí)現(xiàn)，讓程序員編程前知道要做成什么樣的效果就行了。2008-09-09
position:relative/absolute無(wú)法沖破的等級(jí)
position:relative/absolute無(wú)法沖破的等級(jí)...2007-03-03
CSS圖片拼合生成器只需上傳zip包即可...2007-12-12
dl+ol應(yīng)用分析...2007-03-03
table高級(jí)應(yīng)用把表格進(jìn)行到底(必看)
看了poorfish的這篇文章感覺(jué)不錯(cuò)，先不考慮其它的，現(xiàn)在雖然流行div+css ,但仍有許多朋友還在用table,div+css主要考慮顯示速度，但多瀏覽器的兼容性，仍是個(gè)問(wèn)題。2007-12-12
幾乎被設(shè)計(jì)師遺忘了的標(biāo)簽fieldset legend
幾乎被設(shè)計(jì)師遺忘了的標(biāo)簽fieldset legend...2007-11-11