无法消除 Firefox 链接中的虚线轮廓？

我有一个完整的 imgs 列表：

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

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