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

Question

我有一个充满IMG的清单：

<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;
    }

Answer 1

您需要将样式应用于 <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;
}

Answer 2

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

在FF22中为我工作

Answer 3

轮廓：0 应该这样做，应该应用于 <a> 元素，实际上不是一个孩子 <img />. <img /> 是一个孩子 <a> 因此，您的CSS应该阅读：

#ul li a {
    outline: 0;
}