css - 绝对定位的元素在 :active - but why? 处向下跳跃

Question

我有一个 anchor ，其中一 block 包裹在 <em> 中标签，这样我就可以绝对定位在 anchor 背景 Sprite 的顶部，它位于 anchor 文本其余部分的左侧。

一切都很好，除了 :active 时绝对定位位向下跳了大约 20 像素。

我很难诊断这个问题，因为您只能使用 firebug 检查 :active 状态，因为您必须实际单击该元素才能显示 :active 规则!

这是页面http://cure.org/brant所讨论的部分是绿色的号召性用语按钮。如果您单击并按住(或只是单击)，您将看到按钮上的 html 文本按照描述向下跳转。

仅供引用，此页面的样式位于 brant.css 文件中，而不是 main.min.css

Answer 1

好的，我找到了，

您有一条执行此操作的规则:

a.active 
{
    position:relative;
}

这为您的事件按钮提供相对定位。 在 li.lp-ask-butn-sm a:hover、li.lp-ask-butn-sm a:focus、li.lp-ask-butn-sm a:active 中添加静态定位

brant.css

帮助

li.lp-ask-butn-sm a:hover, li.lp-ask-butn-sm a:focus, li.lp-ask-butn-sm a:active
{
    position:static;
}

但是，我很好奇相对定位是如何导致它向下移动的。 更新:根据 firebug，链接和强项仍然处于正确的位置，但它被渲染得更低。这令人费解。

无论如何，我发布的关于本段的解决方案稍微解决了问题。