按钮不可点击(Button is unclickable)

按钮不可点击(Button is unclickable)

目前，我们使用平滑的ccs专用按钮，显示onclick的下推效果。 他们有一个奇怪的行为：

.button { cursor: pointer; display: inline-block; color: #FFF; font-weight: normal; border-radius: px; text-align: center; text-decoration: none; display: inline-block; background: #2a2f0; border: 0px; border-bottom: 2px solid #1e87cc; padding: 10px 0px; } .button:hover { background: #1e87cc !important; border-bottom: 2px solid #0169AD; } .button:active { border-bottom: 0px !important; border-top: 2px solid #0169AD; margin-top: 2px; padding-top: 10px; padding-bottom: 8px; }

http:///6SeG8/

问题是：单击顶部2至4像素处的按钮时，单击事件不会触发。 css：active状态确实会触发，但按钮的动作不会触发。

Currently we make use of nice flat ccs-only butt that show a push-down effect onclick. They have a weird behaviour:

.button { cursor: pointer; display: inline-block; color: #FFF; font-weight: normal; border-radius: px; text-align: center; text-decoration: none; display: inline-block; background: #2a2f0; border: 0px; border-bottom: 2px solid #1e87cc; padding: 10px 0px; } .button:hover { background: #1e87cc !important; border-bottom: 2px solid #0169AD; } .button:active { border-bottom: 0px !important; border-top: 2px solid #0169AD; margin-top: 2px; padding-top: 10px; padding-bottom: 8px; }

http:///6SeG8/

The problem is: When clicking the button at the top 2 to 4 pixels, the click event will not trigger. The css :active state does trigger, but the action of the button does not.

最满意答案

考虑使用after伪元素：

.button:active:after{ content: " "; position: absolute; top: -4px; left: 0; width: 100%; height: 100%; }

的jsfiddle

请注意，它在IE7及更早版本中不起作用。

Cider using an after pseudo-element:

.button:active:after{ content: " "; position: absolute; top: -4px; left: 0; width: 100%; height: 100%; }

JSFiddle

ote, that it doesn't work in IE7 and earlier.