Làm cách nào để xóa đường viền chấm chấm khỏi các phần tử <area> trong Firefox?

Question

Trong Firefox (phiên bản hiện tại 14.0.1), tôi có một đường viền chấm xung quanh một số thẻ <area> mà tôi đã tạo here (http://mediabrands.com.au/). Không chỉ tôi thấy một đường chấm chấm, nhưng một khi nó đã xuất hiện, tôi không thể loại bỏ nó (bằng cách bấm vào một khu vực khác chẳng hạn).

Tôi đã tìm kiếm xung quanh đây và Google trong một khoảng thời gian đáng kể, và vẫn chưa được quản lý để thoát khỏi chúng. Chúng không xuất hiện trong bất kỳ trình duyệt nào khác.

Những điều tôi đã cố gắng (và tất cả sự kết hợp của các bên dưới) nhưng không thành công:

• Thêm outline: none đến img, bản đồ và các thẻ khu vực (và họ :focus và :active) các đối tác.
• Đã thêm border: none vào từng loại.
• Đã thêm hidefocus="hidefocus" vào từng loại.
• Đã thêm các kết hợp khác nhau bằng cách sử dụng ::-moz-focus-inner{ border: none; outline: none; } cho từng yếu tố đó.
• Đã thêm .focus(function(){ $(this).blur(); }) (jQuery) vào từng loại.

Tôi tin rằng tôi đã cạn kiệt tất cả thông tin tôi có thể gặp phải - có cách nào khác để loại bỏ các dòng này không?

Dưới đây là HTML để tham khảo nhanh, và cho khả năng một cái gì đó trong đó là lý do tôi không thể thoát khỏi nó:

<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

Sự cố là chức năng lấy nét mờ của bạn trên dòng 151 của dial.js. Việc xóa nó sẽ khắc phục sự cố.

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

Để tránh tập trung vào các yếu tố khu vực, thiết lập một tabindex để -1, ví dụ:

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

Demo: http://jsfiddle.net/SO_AMK/K8Adx/

Answer 2

Hãy thử sử dụng CSS: text-decoration:none;

Answer 3

Setting Thử Focus khu vực và các quốc gia tích cực vào biên giới 0 như sau:

theo những câu dưới đây: 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

Dường như làm mờ trên tập trung gây ra vấn đề:

Remove from dial.js:

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

Đây là một fiddle tôi đã thực hiện để đơn giản hóa mọi thứ: http://jsfiddle.net/MadLittleMods/gDrAS/ luận và bỏ javascript để xem các kết quả khác nhau.

---

Giải pháp làm mờ và tiêu điểm là sử dụng event.preventDefault(). Vì vậy, bạn có thể thay thế những gì được lấy ra ở trên để:

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

Ngoài ra còn có một sửa chữa tabindex sử dụng tabindex="-1" thuộc tính.