CSS跨瀏覽器的外形抑制在點擊

Question

我有一個菜單結構，看起來像這樣：

HTML：

<li> 
    <a href="#page"> 
    <b>Recover Account</b> 
    </a> 
</li> 

CSS：

#nav ul li a 
{ 
    color: #889DBF; 
    display: block; 
    line-height: 22px; 
    padding-left: 20px; 
    text-decoration: none; 
} 

#nav ul li a b 
{ 
    display: block; 
    padding-right: 21px; 
} 

#nav ul li.current a 
{ 
    background: url('/images/nav-left.png') no-repeat; 
    color: #111B35; 
} 

#nav ul li.current a b 
{ 
    background: url('/images/nav-right.png') no-repeat 100% 0; 
    color: #111B35; 
} 

我一直在嘗試了很多很多天都可以找到跨瀏覽器的解決方案來抑制點擊時的輪廓樣式，同時通過選項卡導航來啓用它。

沒有寫在下面幾頁的解決方案都爲我工作： http://people.opera.com/patrickl/experiments/keyboard/test http://haslayout.net/css-tuts/Removing-Dotted-Border-on-Clicked-Links

有誰知道如何解決這個問題？任何解決方案（僅限CSS，JS，CSS + JS）受到歡迎。 非常感謝提前！

[TL;DR] 
Outline On Click -> DISABLED 
Outline On Tab Navigation -> ENABLED 
Any cross-browser solution? Thanks! 

Answer 1

你必須使用JavaScript的，這樣就可以鍵盤和鼠標事件觸發區分。回答你的問題的

部分已經被張貼在Differentiate between focus event triggered by keyboard/mouse

這裏是使用完整的解決方案jQuery javascript框架：

var isClick; 
$(document).bind('click', function() { isClick = true; }) 
      .bind('keypress', function() { isClick = false; }) 
      ; 
var userInterestHandlers = { 
    on: function (e) { 
     var $self = $(this); 
     var classname =isClick ? 'mouse' : 'keyboard'; 
     $self.addClass(classname); 
    } 
    off: function (e) { 
     var $self = $(this); 
     $self.removeClass('mouse keyboard'); 
    } 
} 

$('a').bind ('focus active', userInterestHandlers.on); 
$('a').bind ('blur', userInterestHandlers.off); 

後來纔在a.keyboard或a.mouse定義所需的樣式CSS類。

Answer 2

CSS：

a:active { 
    outline:0 !important; 
}