Question

带有填充和CSS样式的HTML链接无法在Google Chrome，Apple Safari，Opera，Mozilla Firefox中使用。但是，它适用于Internet Explorer 8。

这是一个示例代码。尝试单击堆栈 - 链接不起作用，单击溢出 - 链接工作。我的意思是工作 - 导航到StackOverflow网站。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>css active padding href problem</title>
        <style type="text/css">
            a{
                display: inline-block;
                background:#CCC;
                border:1px solid #666;
                padding:0 35px 0 0;
            }
            a:active{
                padding:0 0 0 35px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>Click on <i>Stack</i> - href does not work.
               Click on <i>Overflow</i> - href works.
               All browsers are affected.
               Except IE.</p>
            <a href="http://stackoverflow.com/">StackOverflow</a>
        </div>
    </body>
</html>

为什么它在大多数浏览器中不起作用？

编辑2：如果更改：active to：hover，则所有浏览器中的所有内容都按预期工作 - 单击“发生”并且“浏览器”导航到stackoverflow.com

编辑3 ：要证明可以点击填充区域，您可以将样式更改为：

<style type="text/css">
    a{
        padding:0 0 0 35px;
    }
</style>

如果有人提到链接“移动”，那么为什么可以点击已经“移动”的链接？

Answer 1

我找到了解决方案！ http://jsfiddle.net/rydl/Yu6vp/3/

David是对的，问题是由移动的文本节点引起的。因此，解决方案必须完全阻止文本节点被点击。我使用了锚点：after-pseudo-element来覆盖整个按钮，同时不可见：

a:after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  height: 100%;
  width: 100%;
}

Answer 2

使用填充，文本会从您单击的位置移开。这是你的代码： http://jsfiddle.net/ctrlfrk/3KsRx/

按住'Stack'上的鼠标按钮，您将看到文字从鼠标下移开。

你想要达到什么目的？这是应该的方式。如果Internet Explorer跟踪链接，那就错了。

[编辑] 澄清：

这里真正的问题是，如果mousedown事件目标与mouseup事件目标匹配，则只会触发'click'事件。当您单击示例中的文本时，mousedown目标是text node，它是anchor标记的子项。然后，此text node移开，因此mouseup事件目标只是anchor标记本身。

使用：hover，文本节点在您单击之前移开，因此mousedown事件目标是anchor标记，mouseup事件也是anchor标记，因此遵循链接。

[/编辑]

Answer 3

尝试使用边距更改填充，因为填充更改元素位置也会更改。

a {
    margin:0 0 0 35px;
}

浏览器（firefox，chrome等）有效的鼠标点击是在同一元素上按下并释放的鼠标。

编辑：我无法改变浏览器的行为（纯css中没有解决方案），但您可以使用javascript来完成此操作

<a href="http://stackoverflow.com/" onmousedown="window.location=this;">StackOverflow</a>

编辑：：悬停代替：激活，因为因为元素不会在按下时间和释放时间之间改变位置

带有填充和CSS样式活动的HTML链接不起作用

3 个答案: