按钮无法正常工作（onclick 事件）答案

【问题标题】：Button doesn't work as it should (onclick event)按钮无法正常工作（onclick 事件）
【发布时间】：2014-01-16 19:50:15
【问题描述】：

我正试图弄清楚为什么我的代码不起作用。该按钮仅在您单击某个区域时才起作用。如果您尝试在文本之间或上方单击，则不会发生任何事情。请在此处查看我的小提琴：

http://jsfiddle.net/Zv6Cx/

我认为这与我的一个影子有关：

 box-shadow:        inset 0px -4px 5px rgba(255,255,255,0.2),
                        inset 0px 1px 5px rgba(255,255,255,0.2),
                        /**/
                        0px 12px 0px #231F20,
                        0px 14px 0px #231F20,
                        0px 16px 0px #231F20,
                        /**/
                        0px 8px 5px rgba(0,0,0,0.5);

    -moz-box-shadow:    inset 0px -4px 5px rgba(255,255,255,0.2),
                        inset 0px 1px 5px rgba(255,255,255,0.2),
                        /**/
                        0px 12px 0px #231F20,
                        0px 14px 0px #231F20,
                        0px 16px 0px #231F20,
                        /**/
                        0px 8px 5px rgba(0,0,0,0.5);

    -webkit-box-shadow: inset 5px -4px 5px rgba(255,255,255,0.2),
                        inset 5px 1px 5px rgba(255,255,255,0.2),
                        /**/
                        0px 12px 0px #231F20,
                        0px 14px 0px #231F20,
                        0px 16px 0px #231F20;
}

【问题讨论】：

刚刚在 SO 上发现了一个相关问题：stackoverflow.com/questions/18167981/…

标签： jquery html css button shadow

【解决方案1】：

您需要适当地设置transform-origin-y（y 因为您正在绕X 轴旋转）。默认值为 50%，这使得您无法单击旋转元素的一部分。我认为这有点不稳定，但这似乎是问题所在。

transform-origin-y: 0

这将解决它，尽管它确实将按钮向上移动了一点。如果需要，请添加更多上边距：

http://jsfiddle.net/Zv6Cx/5/

【讨论】：

或删除 -webkit-transform: rotateX( 35deg ) 并调整填充/高度。我不知道你为什么要轮换...
太棒了！这解决了大约 99% 的问题。顶部仍有一小块区域，点击后不会执行任何操作。
@JoshC 是的，你可以看出我不是 CSS 人。感谢大家的帮助。