Question

对于不少网站，我使用CSS3 Bon Bon buttons允许按钮显示3D效果。我经常将它们用于我的<a></a>链接。

一切正常，除非应用display: inline-block时，似乎并不总是正确点击。有时（但并非总是），您可能必须在注册之前单击按钮3或4次。其他时候，完全相同的按钮会立即点击。它似乎发生在所有浏览器和平台上。

为什么会这样，是否有解决方案？如果我将其设置为display block，则效果很好，但有些情况display:block不理想。

JSFiddle（Code）（Live Example）

Answer 1

我认为使用display：block;可能正在填充按钮内的额外不可点击的空间，所以当你切换到显示：inline-block;内联元素忽略了填充额外空间。

考虑到用于渲染按钮的CSS，您的示例非常密集且很难弄清楚发生了什么。不要以为你可以提供一个简化的版本，以便更容易看到发生了什么？

Answer 2

好好调试一段时间后，我知道是什么导致了它。我不知道为什么，有些专家可以试着解释一下。在

.cta-primary:active, .cta-secondary:active

它包含

-webkit-transform: translateY(0.2em);
-moz-transform: translateY(0.2em);
-ms-transform: translateY(0.2em);
-o-transform: translateY(0.2em);
transform: translateY(0.2em);

我删除了它并且它有效。不知道为什么这会干扰，但确实如此。也许是因为translate会移动该活动毫秒的元素，并且点击实际上没有按下按钮，但在视觉上你无法真正告诉因为它太快了。如果您将0.2em替换为0，它也将起作用，因为它不会移动元素。希望这是你正在寻找的。

内联块是否会影响链接的可点击性？

2 个答案: