点击URL'碰撞'文本/图像一点

Question

我目前正在一个网站上工作，但过了一段时间后，我开始注意到当你点击它们时文字和图像如何“碰撞”。我不知道这是如何发生的，我也不知道如何摆脱它。还有一些其他问题在同一时间开始发生。

示例：

1. 点击徽标可使其移动一点。

2. 点击其中一个面包屑使其看起来突然变得粗体

3. 我的帖子标题是白色的（因此看不见），即使我将它们设置为半黑色。当点击它们时，文本会显示出来（改变它应该做的颜色），但它的字体大小也会显着减少。

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

非常感谢帮助！

Answer 1

你的CSS中有这样的东西：

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

这与：

相同

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

点击它们时，你不小心给所有锚元素添加了一些填充，这就是为什么你的徽标跳了一下。

大胆是由类似的表达引起的：

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

Answer 2

只需禁用锚点样式a：active

上的填充