html - 单击 URL 'bumps' 文本/图像一点

Question

我目前正在一个网站上工作，但过了一段时间后，我开始注意到当您点击文本和图像时，它们会稍微“凸起”。我不知道这是怎么开始的，我也不知道如何摆脱它。大约在同一时间还开始出现其他一些问题。

例子:

1. 点击 Logo 会使它四处移动。

2. 单击其中一个面包屑会使它看起来突然变成粗体

3. 我的帖子标题是白色的(因此不可见)，尽管我将它们设置为半黑色。当点击它们时，文本会显示出来(像它应该做的那样改变颜色)但它的字体大小也会显着减小。

我尝试了 css 和 html 验证器，但它说我的网站实际上是有效的。

非常感谢您的帮助!

Answer 1

你的 CSS 中有这样的东西:

#breadcrumbs a, a:visited, a:active { ...

这等同于:

#breadcrumbs a { ...
a:visited { ...
a:active { ...

您在单击所有 anchor 元素时不小心给了它们一些填充，这就是您的 Logo 跳动的原因。

粗体是由类似的表达式引起的:

.post-title a, a:active, a:visited {
    color: #3e3e40;
    font-weight: bold;
    font-family: "Helvetica", Tahoma, Geneva, sans-serif;
}

这会使页面上的所有链接在单击时变为粗体。

编写这些复合选择器的正确方法是在每个表达式中包含整个链:

#breadcrumbs a, #breadcrumbs a:visited, #breadcrumbs a:active { ...