带有填充和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/
http://jsfiddle.net/ctrlfrk/3KsRx/
按住“堆栈”上的鼠标按钮,您将看到文本远离鼠标下方.
你想要达到什么目的？这是应该的方式.如果Internet Explorer跟随链接,那么它是错误的.
[编辑]
澄清：
这里真正的问题是,如果mousedown事件目标与mouseup事件目标匹配,则“click”事件似乎才会触发.
当您单击示例中的文本时,mousedown目标是一个文本节点,它是锚标记的子节点.
然后,此文本节点移开,因此mouseup事件目标只是锚标记本身.
使用：hover,文本节点在您单击之前移开,因此mousedown事件目标是锚标记,mouseup事件也是锚标记,因此遵循链接.
[/编辑]
