Html 如何从<；中删除虚线边框；面积>；Firefox中的元素？

在Firefox（当前版本14.0.1）中，我得到了一些

的虚线轮廓。我不仅看到一条虚线，而且一旦它出现，我就无法摆脱它（例如单击另一个区域）


我在这里和谷歌搜索了相当长的一段时间，仍然没有摆脱他们。它们不会出现在任何其他浏览器中

我尝试过的事情（以及以下所有组合）都没有成功：


将
outline:none
添加到img、地图和区域标签（及其
：focus
和
：active
）对应项中
添加了
边框：无
添加了
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>


尝试使用CSS:
文本装饰：无
尝试将区域焦点和活动状态设置为边框0，如下所示：

根据以下问题：

焦点模糊似乎是问题的根源：

从dial.js中删除：

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

这是我用来简化一切的小提琴：
注释和取消注释javascript以查看不同的结果


模糊和焦点的解决方案是使用
event.preventDefault（）
。因此，您可以将上面删除的内容替换为：

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

还有一个使用
tabindex=“-1”
属性的
tabindex
修复。
问题在于dial.js第151行的模糊聚焦功能。删除它可以解决问题

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

为防止聚焦在区域元素上，将a设置为
-1
，即

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

@Asad是的，我也试过了
没有
。说这个我真的很难过，但请你再试一次！重要吗？或者在某种孤立的环境中，没有所有额外的css和js。@Asad抱歉，是的，我已经用
尝试了一切！重要信息
也很重要。@MartyWallace您是否尝试过
：选择
伪选择器？@Ben Yeah，检查了Firebug，没有发现任何异常，如浏览器强制轮廓样式等。这是Internet Explorer的解决方案。这个问题是关于Firefox的。这是正确的，但是css仍然可以在FF中解决这个问题。根据这个问题，他没有尝试：专注和：主动。我想试一试，因为虚线似乎只有在你点击链接后才会出现。@Aaron请查看我问题中“我尝试过的事情…”下的第1点。我相信关于
stopPropagation
的信息是错误的。从文档中可以看出，这不会阻止同一元素上的其他处理程序运行。它可能看起来有效，因为它在您的代码示例中拼写错误，可能导致中断<代码>事件。preventDefault更合适（或组合），但仅在快速测试中
返回false似乎一直有效。@Mattwipple感谢您的拼写检查。修好了。我确信还有一些函数会产生同样的效果
<area tabindex="-1" title="Ansible" class="tab" id="click-ansible" shape="poly" coords="...