4

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

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

为什么会这样，有解决方案吗？如果我将它设置为display block，它可以完美运行，但有些情况display:block并不理想。

JSFiddle（代码）（现场示例）

4

2 回答 2

1

我认为使用 display: block; 可能正在填充按钮内额外的不可点击空间，因此当您切换到 display: inline-block; 内联元素忽略填充额外的空间。

鉴于用于呈现按钮的 CSS，您的示例非常密集且难以弄清楚发生了什么。不要以为你可以提供一个精简的版本，让你更容易看到发生了什么？

于 2013-08-15T17:57:39.897 回答
1

好的，经过一段时间的调试，我知道是什么原因造成的。不知道为什么，有高手可以解释一下。在

.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);

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

于 2013-08-15T18:33:20.527 回答