无法摆脱Firefox链接中的虚线轮廓? [英] Can't get rid of dotted outline in Firefox links?

问题描述

我有一个完整的img列表:

I have a list full of a 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中单击它们时，有一个虚线轮廓(谁发明了这个东西，为什么?为什么如此丑陋！).

When I click them in Firefox, there's dotted outline (who the heck invented that and why? so ugly!).

我想摆脱它们，但是样式轮廓"等似乎不起作用，我尝试了以下所有选项:

I want to get rid of them, but style "outlines" etc. doesn't seem to work, I've tried all of options below:

#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>标记放在.

You need to apply the styles to the <a> tag (your latter two CSS rules are wrong because you've put the <a> tag inside <img>.

这对我有用:

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

或者，仅对于ID为ul的元素(顺便说一句，不是最佳名称):

Or, for only inside the element with ID ul (not the best name, by the way):

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

这篇关于无法摆脱Firefox链接中的虚线轮廓?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！