具有填充和 CSS 样式的 HTML 链接在 Google Chrome、Apple Safari、Opera、Mozilla Firefox 中不起作用。但是，它适用于 Internet Explorer 8。
这是一个示例代码。尝试单击 Stack - 链接不起作用，单击 Overflow - 链接有效。我的意思是作品 - 导航到 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>
如果链接像有人提到的那样“移动”，那么为什么可以点击已经“移动”的链接？
最佳答案
我找到了解决办法! http://jsfiddle.net/rydl/Yu6vp/3/
David 是对的，问题是由移动的文本节点引起的。所以解决方案必须完全防止文本节点被点击。我使用 anchor 的 :after-pseudo-element 来覆盖整个按钮，同时不可见:
a:after {
position: absolute;
top: 0;
left: 0;
content: ' ';
height: 100%;
width: 100%;
}
关于具有填充和 CSS 样式的 HTML 链接不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4280522/