¿Cómo puedo eliminar el borde punteado de los elementos <area> en Firefox?

Question

En Firefox (versión actual 14.0.1) Obtengo un contorno punteado alrededor de algunas etiquetas <area> que he creado here (http://mediabrands.com.au/). No solo veo una línea punteada, pero una vez que aparece, no puedo deshacerme de ella (haciendo clic en otra área, por ejemplo).

He buscado por aquí y Google para una cantidad considerable de tiempo, y todavía no han logrado deshacerse de ellos. No aparecen en ningún otro navegador.

cosas que he intentado (y todas las combinaciones de los siguientes), sin éxito:

• outline: none Añadir a la IMG, el mapa y la zona de las etiquetas (y sus :focus y :active) homólogos.
• Agregado border: none a cada uno de esos.
• Agregado hidefocus="hidefocus" a cada uno de esos.
• Se agregaron varias combinaciones usando ::-moz-focus-inner{ border: none; outline: none; } a cada uno de esos elementos.
• Agregó .focus(function(){ $(this).blur(); }) (jQuery) a cada uno de esos.

Creo que he agotado toda la información que he podido encontrar, ¿hay alguna otra forma de deshacerse de estas líneas?

Aquí está el código HTML para una referencia rápida, y por la posibilidad de que algo en el ser allí la razón por la que no puede deshacerse de ella:

<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

El problema es su función de desenfoque en la línea 151 de dial.js. Eliminarlo soluciona el problema.

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

Para evitar que se centra en elementos de superficie, establezca un tabindex a -1, es decir

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

Demostración: http://jsfiddle.net/SO_AMK/K8Adx/

Answer 2

Trate de usar CSS: text-decoration:none;

Answer 3

intente configurar el área de enfoque y estados activos de la frontera 0 como el siguiente:

según la siguiente pregunta: 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

Parece que el enfoque desenfoque está causando el problema:

Eliminar de dial.js:

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

Aquí es un violín que hice para simplificar todo: http://jsfiddle.net/MadLittleMods/gDrAS/ comentario y elimine el comentario Javascript para ver los diferentes resultados

---

Una solución para el desenfoque y el enfoque es utilizar event.preventDefault(). Para que pueda reemplazar la que se elimina arriba a:

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

También hay un arreglo usando tabindextabindex="-1" atributo.