Question

我有一个充满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;
    }

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

outline：0 应该这样做，它应该应用于<a>元素，而<img />元素实际上不是<img />的子元素。 <a>是#ul li a { outline: 0; }的孩子，因此您的css应为：

{{1}}

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

3 个答案: