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

Question

带有填充和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="http://stackoverflow.com/">StackOverflow</a>
        </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

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

编辑2:如果你改变:active to:hover,那么所有浏览器中的一切都按预期工作 - 点击发生,浏览器导航到stackoverflow.com

编辑3:要证明可以单击填充区域,您可以将样式更改为:

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

dav*_*vid 1

通过填充，文本会远离您单击的位置。这是您的代码： http: //jsfiddle.net/ctrlfrk/3KsRx/

按住“Stack”上的鼠标按钮，您将看到文本从鼠标下方移开。

你想达到什么目的？这正在按其应有的方式运作。如果 Internet Explorer 遵循该链接，那么它是错误的。

[编辑]澄清：

这里真正的问题是，“click”事件似乎只有在 mousedown 事件目标与 mouseup 事件目标匹配时才会触发。当您单击示例中的文本时，mousedown 目标是该标签text node的子级anchor。然后它text node会移开，以便 mouseup 事件目标只是anchor标签本身。

使用 :hover 时，文本节点在单击之前就移开，因此 mousedown 事件目标是标签anchor，mouseup 事件也是标签anchor，因此链接被跟随。

[/编辑]

归档时间：	15 年，1 月前
查看次数：	19642 次
最近记录：	12 年，10 月前