Question

我有一个包含在<em>标签中的棋子的锚点，这样我就可以绝对定位在锚点背景精灵的顶部，该精灵位于其余锚文本的左侧。

一切都很好，除了：激活绝对定位的位大约跳过20个像素。

我很难诊断这个，因为你只限于检查：使用firebug的活动状态，因为你必须实际点击元素才能获得：活动规则出现！

这是页面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 in

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;
}

然而，我很好奇相对定位会导致它向下移动。更新：根据萤火虫，链接和强者仍处于正确的位置，但它会降低。这很令人困惑。

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

Answer 2

此规则中position被设置为relative：

a:active {
    outline:0 none;
    position:relative;
    top:1px;
}

将position:static添加到此规则以覆盖a:active行为：

li.lp-ask-butn-sm a:hover, li.lp-ask-butn-sm a:focus, li.lp-ask-butn-sm a:active {
    background-position:left -50px;
    color:#2F2511;
    position:static; /* add this */
}

绝对定位元素跳跃：活跃 - 但为什么？

2 个答案: