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

带有填充和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="https://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>

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

解决方法

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

按住“堆栈”上的鼠标按钮,您将看到文本远离鼠标下方.

你想要达到什么目的？这是应该的方式.如果Internet Explorer跟随链接,那么它是错误的.

[编辑]
澄清：

这里真正的问题是,如果mousedown事件目标与mouseup事件目标匹配,则“click”事件似乎才会触发.
当您单击示例中的文本时,mousedown目标是一个文本节点,它是锚标记的子节点.
然后,此文本节点移开,因此mouseup事件目标只是锚标记本身.

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

[/编辑]

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

解决方法

相关文章