无法摆脱Firefox链接中的虚线轮廓？

我有一个充满IMGS的列表：（？！谁的挫折感发明了，为什么这么难看）无法摆脱Firefox链接中的虚线轮廓？

<ul> 
<li><a href="#"><img src="test.png" /></a</li> 
<li><a href="#"><img src="test.png" /></a</li> 
<li><a href="#"><img src="test.png" /></a</li> 
(...) 
</ul>

当我在Firefox中点击它们，有虚线轮廓。

我想摆脱他们，但风格“概述”等似乎不工作，我已经试过所有的以下选项：

#ul li img:active { 
    -moz-outline-style: none; 
    -moz-focus-inner-border: 0; 
    outline: none; 
    outline-style: none; 
}  

#ul li img:focus { 
    -moz-outline-style: none; 
    -moz-focus-inner-border: 0; 
    outline: none; 
    outline-style: none; 
} 

#ul li img a:active { 
     -moz-outline-style: none; 
     -moz-focus-inner-border: 0; 
     outline: none; 
     outline-style: none; 
    }  

    #ul li img a:focus { 
     -moz-outline-style: none; 
     -moz-focus-inner-border: 0; 
     outline: none; 
     outline-style: none; 
    }

来源

2010-09-14 fomicz

您可以将您的问题的屏幕截图在你的问题？ – 2010-09-14 10:16:07

“谁发明了这个，为什么？这么丑！”可访问性。因为您需要指出在使用键盘按下网站时要关注哪个元素。不要只是用'outline：0'去除它 - 想想这些用户的替代方案。 – 2010-09-14 10:21:44

@Yi Jiang，这就是主播国家在那里。一个好的开发人员应该使用a：active，a：focus和可选的a：visited进行访问 - 它并不总是必须显示丑陋的轮廓。它也适用于TabBbing。哦，我很确定它在所有其他浏览器中默认关闭。 – Marko 2010-09-14 10:29:57

您需要的样式应用到<a>标签（你的后两个CSS规则是错误的，因为你已经把<a>标签内<img>

这个工作对我来说：

a:active, 
a:focus { 
    outline: none; 
    -moz-outline-style: none; 
}

或者，只是里面的元素与ID ul（不是最好的名字，顺便说一句）：

部

#ul a:active, 
#ul a:focus { 
    outline: none; 
    -moz-outline-style: none; 
}

来源

2010-09-14 10:17:36 DisgruntledGoat

@ tak3shi谢谢，修正。 – DisgruntledGoat 2015-07-26 23:35:42

大纲：0应该这样做它应该应用于<a>元素，该元素实际上不是<img />的子元素。 <img />是<a>孩子所以你的CSS应该阅读：

#ul li a { 
    outline: 0; 
}

来源

2010-09-14 10:16:59 Marko

这也适用于我 – 2013-11-04 13:26:46

a:active, 
a:focus { 
    outline: none; 
    -moz-outline-style: none; 
}

作品对我来说在FF22

来源

2013-06-26 21:14:16 gidzior

感谢只有这对我有效.. – 2014-02-04 09:47:29

同样在这里，只有这一个也为我工作。 – 2014-03-21 03:05:28

无法摆脱Firefox链接中的虚线轮廓？

回答

相关问题