0

问题：当您单击我们的徽标时，在 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;}

谁能告诉我是什么导致了黑条？

4

4 回答 4

3

发生这种情况的原因是，在 screen.css 的第 45 行，您的规则是“background-color: #000 !important;” 这正在影响 a.coa-link （您的规则设置为影响 a:focus、a:active 等。这就是为什么它仅在您单击/单击并按住链接时发生 [focussing on the element.]）

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

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

那么你的问题就不会再出现了。

高温高压

于 2013-11-05T00:58:27.557 回答
1

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

在此处输入图像描述

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

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

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

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

我永远不会建议!important在 CSS 中使用声明，但由于有人已经添加了它，你需要覆盖它。理想情况下，删除!important附件图像中显示的标签，然后您就不需要在修复中使用它了。

于 2013-11-05T01:02:13.937 回答
1

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

于 2013-11-05T00:52:13.147 回答
1

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

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

它在 chrome 检查器中对我有用。

于 2013-11-05T00:54:35.447 回答