黑色条显示在焦点HTML / CSS上的图像下方

Question

问题：当您点击我们的徽标时，Firefox和Chrome下面会出现一个黑条。如果按住徽标，它就会停留。

以下是我尝试删除焦点上黑条的一些代码：

a:active, a:focus { 
 outline: none; 
}
a {
outline: none;
}
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
a img {outline : none;}
img {border : 0;}

有人能告诉我导致黑条的原因吗？

Answer 1

发生这种情况的原因是因为，在screen.css的第45行，你有一条规则说“background-color：＃000！important;”这会影响a.coa-link（你的规则被设置为影响a：focus，a：active，等等。这就是为什么它只发生在你点击/点击保持链接[聚焦于元素。]）

如果你添加到style.css的第35行：

#header a.coa-link { clear: both; /* YOUR EXISTING CODE */
    background-color: transparent !important; /* NEW LINE OF CODE */ }

然后您的问题将不再发生。

HTH

Answer 2

尝试将.coa-link类的背景颜色设置为rgb(43,66,114)，这是为您的身体元素设置的背景颜色。

Answer 3

好的，这是一个非常奇怪的问题，但解决方法是在图像周围添加div：

<a class="coa-link" href="/" title="Home">
<div>
<img src="/files/2012/07/AC-banner-white-test7.png" alt="">
</div>
</a>

它在铬检查员身上对我有用。

Answer 4

这种情况正在发生，因为您为<a>标记实施了焦点样式。它显示为黑条的原因是因为徽标图像周围的<a>在CSS中没有display: block;。如果它确实有display: block，则整个标题将具有黑色背景。

另一个问题是那里有一个!important标签。 Booo。

您需要添加以下样式来修复徽标链接中的黑条：

#header .coa-link a {
    display: block;
}

#header .coa-link a:focus,
#header .coa-link a:active, {
    background: transparent!important;
}

我永远不会建议在CSS中使用!important声明，但是当有人已将其添加进去时，您需要覆盖它。理想情况下，请删除附加图片中显示的!important标记，然后您就不需要它了。