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

Posted 2023-03-06

【中文标题】无法摆脱 Firefox 链接中的虚线轮廓？

【英文标题】：Can't get rid of dotted outline in Firefox links?

【发布时间】：2011-04-12 02:19:50

【问题描述】：

我有一个完整的列表：

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

【问题讨论】：

你可以在你的问题中添加你的问题的截图吗？

“这到底是谁发明的，为什么？太丑了！”可访问性。因为当您使用键盘在网站上按标签时，您需要指出哪个元素是焦点。不要只是用outline: 0 删除它 - 为这些用户想一个替代方案。

@Yi Jiang，这就是主播状态的用途。一个优秀的开发人员应该使用 a:active、a:focus 和可选的 a:visited 以获得可访问性 - 它并不总是必须显示丑陋的轮廓。它也适用于制表符。哦，我很确定它在所有其他浏览器中默认关闭。

【参考方案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;

【参考方案2】：

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

在 FF22 中为我工作

【参考方案3】：

outline: 0 应该这样做，它应该应用于<a> 元素，它实际上不是<img /> 的子元素。 <img /> 是 <a> 的孩子，所以你的 css 应该是：

#ul li a 
    outline: 0;