如何從Firefox的<area>元素中刪除虛線邊框？

Question

在Firefox（當前的版本14.0.1）中，我創建了here (http://mediabrands.com.au/)的一些<area>標籤的虛線輪廓。我不僅看到虛線，而且一旦出現，我無法擺脫它（例如通過點擊另一個區域）。

我搜索在這裏和谷歌在相當長的時間，仍然沒有設法擺脫他們。它們不會出現在任何其他瀏覽器中。

事情我已經試過（和下面的所有組合），但沒有成功：

• 添加outline: none到IMG，地圖和區域標籤（和他們的:focus和:active）同行。
• 向其中的每一個添加了border: none。
• 將hidefocus="hidefocus"添加到這些中的每一個。
• 使用::-moz-focus-inner{ border: none; outline: none; }添加到各個元素的各種組合。
• 爲每個添加了.focus(function(){ $(this).blur(); })（jQuery）。

我相信我已經用盡了所有我能遇到的信息 - 有沒有其他辦法可以擺脫這些線？

這是爲快速參考的HTML，併爲東西在裏面是我無法擺脫它的原因的可能性：

<img src="anatomy/dial/components/foundation.png" id="dial-map" usemap="#dial" /> 
<map name="dial"> 
    <area title="Ansible" class="tab" id="click-ansible" shape="poly" coords="412,419,376,447,313,474,248,487,247,434,327,415,374,377" href="#"> 
    <area title="Cadreon" class="tab" id="click-cadreon" shape="poly" coords="487,245,478,313,455,366,416,417,378,380,429,299,434,246" href="#"> 
    <area title="Orion" class="tab" id="click-orion" shape="poly" coords="418,73,453,117,482,191,484,242,431,244,422,180,378,111" href="#"> 
    <area title="Ensemble" class="tab" id="click-ensemble" shape="poly" coords="247,1,311,10,368,35,415,70,378,108,312,66,244,53" href="#"> 
    <area title="Reprise" class="tab" id="click-reprise" shape="poly" coords="73,69,111,39,176,8,242,2,243,53,172,66,112,108" href="#"> 
    <area title="Magna Global" class="tab" id="click-magnaglobal" shape="poly" coords="245,487,186,481,114,450,71,417,110,377,175,423,246,432" href="#"> 
    <area title="Airborne" class="tab" id="click-airborne" shape="poly" coords="69,414,37,373,12,316,2,244,55,244,68,322,106,375" href="#"> 
    <area title="Marketing Sciences" class="tab" id="click-analytics" shape="poly" coords="2,242,11,171,33,120,71,74,109,109,70,168,54,241" href="#"> 
    <area title="MB3" class="tab" id="click-mb3" shape="poly" coords="257,430,178,422,120,384,82,340,140,305,163,337,206,360,262,364,317,342,348,305,404,340,384,367,324,413" href="#"> 
    <area title="UM" class="tab" id="click-um" shape="poly" coords="307,134,245,116,246,56,309,68,375,109,418,178,430,237,429,288,404,339,350,303,368,246,358,198,344,169" href="#"> 
    <area title="Initiative" class="tab" id="click-initiative" shape="poly" coords="80,339,63,289,58,235,72,171,109,112,176,67,243,56,242,119,192,128,152,159,126,206,122,261,137,306" href="#"> 
    <area title="View Website" id="website" shape="poly" coords="173,330,139,292,133,213,161,167,196,143,245,129,305,146,336,176,359,246,339,300,309,335,260,352,209,351" href="#"> 
</map> 

Answer 1

問題是dial.js行151上的模糊焦點功能。刪除它可以解決問題。

$("img, area, map").focus(function(event) { 
    $(this).blur(); 
}); 

爲了防止重點區域元素，設置一個tabindex到-1，即

<area tabindex="-1" title="Ansible" class="tab" id="click-ansible" shape="poly" coords="... 

演示：http://jsfiddle.net/SO_AMK/K8Adx/

Answer 2

嘗試使用CSS：text-decoration:none;

Answer 3

嘗試設置區域聚焦和活動狀態邊境0，如下所示：

按照以下問題：Blue border around image maps in Internet Explorer 9

a, 
img { 
    outline: none; 
} 
map > area, 
map > area:active, 
map > area:focus { 
    outline: none; 
    border: 0; 
} 

Answer 4

看來，模糊焦點是造成問題：

從dial.js刪除：

// Prevent focus of areas. 
$("img, area, map").focus(function() { 
    $(this).blur(); 
}); 

這裏是一個小提琴我做了簡化一切：http://jsfiddle.net/MadLittleMods/gDrAS/ 評論，並取消對JavaScript查看不同的結果。

---

一種用於模糊和焦點解決方案是使用event.preventDefault()。所以，你可以更換什麼是去除上面：

// Prevent focus of areas. 
$("img, area, map").focus(function(e) { 
    e.preventDefault(); 
}); 

也有使用tabindex="-1"屬性tabindex修復。