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

发布于 2024-09-19 15:24:09 字数 996 浏览 10 评论 0原文

我有一个完整的图像列表：

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

原文

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>

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深陷 2024-09-26 15:24:09

您需要将样式应用于标记（后两个 CSS 规则是错误的，因为您已将标记放入。

这对我有用：

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

或者，仅适用于 ID 为 ul 的元素（顺便说一下，这不是最好的名称）：

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

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

This works for me:

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

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

回复收藏 0 原文

他是夢罘是命 2024-09-26 15:24:09

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

在 FF22 中为我工作

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

works for me in FF22

回复收藏 0 原文

锦上情书 2024-09-26 15:24:09

outline: 0 应该做到这一点，并且应该应用于元素，该元素实际上不是 < 的子元素/代码>。是 的子级，因此您的 css 应为：

#ul li a {
    outline: 0;
}

outline: 0 should do it and it should be applied on the <a> element, which is not actually a child of <img />. <img /> is a child of <a> so your css should read: