带有填充和 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>
为什么它在大多数浏览器中不起作用？
编辑 2： 如果将 :active 更改为 :hover，则所有浏览器中的一切都会按预期工作 - 单击发生并且浏览器导航到 stackoverflow.com
编辑 3： 为了证明这一点可以单击填充区域，您可以将样式更改为：
<style type="text/css">
a{
padding:0 0 0 35px;
}
</style>
如果链接“移动”，正如有人提到的，那么为什么可以单击已经“移动”的链接？
HTML link with padding and CSS style active does not work in Google Chrome, Apple Safari, Opera, Mozilla Firefox. However, it works in Internet Explorer 8.
Here is an example code. Try to click on Stack - link does not work, click on Overflow - link works. By works I mean - navigate to StackOverflow site.
<!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>
Why it does not work in most Browsers?
Edit 2: If you change :active to :hover, then everything works as expected in all Browsers - click happens and Browser navigates to stackoverflow.com
Edit 3: To prove that it is possible to click on padding area you can change style to:
<style type="text/css">
a{
padding:0 0 0 35px;
}
</style>
If link "moves" as someone mentioned, then why it is possible to click on already "moved" link?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我找到了解决办法！
http://jsfiddle.net/rydl/Yu6vp/3/
大卫是对的，问题是是由移动文本节点引起的。因此，解决方案必须完全防止文本节点被单击。我使用锚点的 :after-pseudo-element 来覆盖整个按钮，同时不可见：
I found a solution!
http://jsfiddle.net/rydl/Yu6vp/3/
David is right, the problem is caused by the moving text-node. So the solution must prevent the text-node from being clicked at all. I used the anchor's :after-pseudo-element to cover the whole button, while being invisible:
通过填充，文本会远离您单击的位置。这是你的代码：
http://jsfiddle.net/ctrlfrk/3KsRx/
在“Stack”上按住鼠标按钮，然后您将看到文本从鼠标下方移开。
你想达到什么目的？这正在按其应有的方式运作。如果 Internet Explorer 遵循该链接，那么它是错误的。
[编辑]
澄清：
这里真正的问题是，只有当 mousedown 事件目标与 mouseup 事件目标匹配时，“click”事件才会被触发。
当您单击示例中的文本时，mousedown 目标是一个
text 节点，它是anchor标记的子级。然后，该文本节点会移开，以便 mouseup 事件目标只是
anchor标记本身。使用 :hover 时，文本节点在点击之前就移开，因此 mousedown 事件目标是
anchor标签，mouseup 事件也是anchor标签，因此链接被跟随。[/编辑]
With padding the text moves away from where you clicked. This is your code:
http://jsfiddle.net/ctrlfrk/3KsRx/
hold down the mouse button on 'Stack' and you will see that the text moves away from under the mouse.
What are you trying to achieve? This is working the way it should. If internet explorer follows the link then it is wrong.
[Edit]
Clarifying:
The real problem here is that a 'click' event only seems to fire if the mousedown event target matches the mouseup event target.
When you click on the text in your example, the mousedown target is a
text nodewhich is a child of theanchortag.This
text nodethen moves away, so that the mouseup event target is simply theanchortag itself.With :hover, the text node moves away before you click, so the mousedown event target is the
anchortag, and the mouseup event is also theanchortag, so the link is followed.[/Edit]
尝试使用边距更改填充，随着填充的更改，元素位置也会发生变化。
对于浏览器（firefox、chrome 等），有效的鼠标单击是在同一元素上按下并释放。
编辑：我无法更改浏览器的行为（纯 CSS 中没有解决方案），但您可以使用 javascript 来完成此操作
编辑：:hover 可以代替 ：处于活动状态，因为元素在按下时间和释放时间之间不会改变位置
Try changing the padding with margin, As the padding is changed element position changes as well.
To browsers(firefox,chrome etc) A valid mouse click is one which is pressed and released on same element.
EDIT: I cant change the behavior of browser (no solution in pure css), but you can use javascript to get this done
EDIT: :hover works instead :active because of the reason as element does not change position between time pressed and time released