HTML 输入类型 = chrome 中不可点击的按钮？答案

【问题标题】：HTML's input type = button not clickable in chrome?HTML 输入类型 = chrome 中不可点击的按钮？
【发布时间】：2014-03-12 17:16:07
【问题描述】：

我遇到的问题是，一些按钮只能在按钮的上部约 25% 中单击，指针不会出现在此标记下方的任何位置。
我尝试了一些东西，当我在 CSS 中将其更改为 display: block 时，整个按钮再次变得可点击，但是当我尝试 display: inline-block 时，它再次出现无法点击的错误。

但是，这仅发生在 Chrome 中，在 IE 和 Firefox 中运行良好。 back 按钮也能正常工作，只是分配给类 buttonRot 的那三个按钮不起作用。这里有什么问题？

这是我的代码： [HTML]

<form method="POST" action="zumtesten7.php" style="background-color:white">
<input type="button" value="Jetzt freigeben" name="Speichern" onClick="doSubmit(this.form,<?php echo (int) $intSNr.','.$BuchungsNr ?>)" class="buttonRot">&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="Stornieren" name="Storno" onClick="doStorno(this.form,<?php echo $intSNr.','.$BuchungsNr ?>)" class="buttonRot">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="Seite drucken" name="Drucken" onClick="javascript:window.print()" class="buttonRot">
<input type="button" value="Zurück" name="Back" onClick="javascript:window.location.href='zumtesten6.php?SNr=<?php echo $intSNr;?>'" class="buttonBlau"  style="margin-left: 592px;margin-top:-20px">

[CSS]

.buttonRot {
    padding: 0 5px;
    border: 0;
    box-shadow: 2px 2px 2px #000;
    text-shadow: 1px 1px 1px #000;
    width:auto;
    height:22px;
    cursor:pointer;
    font-weight:bold;
    background-color:#cc0000;
    color:#ffffff;
}

.buttonBlau is the same just with  

background-color:#00aaee;

我猜它与表单有关？
我将第一行的 bg-color 更改为黑色以使其可见，其中只有 3 个红色的。
那些是窃听器，蓝色不在其中并且有效。

编辑：这个标记区域是可点击的http://imgur.com/MJ0vIwT和按钮的外底线，
但你必须是超像素精度..
编辑2：试图增加填充，这是可点击的.. 似乎文本不可点击，填充顶部和底部是可点击的。我很困惑。

好像我在</td></tr>'ing 在 3 个红色按钮之后并为蓝色按钮打开新按钮之后摆脱了它。我不知道如何，但它可以再次整体点击..在我尝试仅删除边距后效果也很好。有时编程令人困惑。 :(

【问题讨论】：

我将您提供的标记和 CSS 粘贴到 jsfiddle，但无法重现您的问题。你可以用“工作”的 jsfiddle 编辑你的问题来重现问题吗？
那是我不明白的，我试图将它交给我的一个比我更了解 css 的朋友，但它在小提琴中奏效..
就在上周，我遇到了类似的问题（在所有浏览器中），页面上有一些特定链接，您只能点击文本的下半部分。在我的情况下，原来有一个图像重叠在链接的顶部，但图像的背景是透明的，所以你看不到它重叠。（只要我们在谈论小提琴，我也尝试将您的代码放在小提琴中并且无法重现问题：jsfiddle.net/5bT69）
我用chrome的可点击区域编辑了一张图片。
尝试添加 -webkit-appearance: none;和 z-index: 999;

标签： html css google-chrome button

【解决方案1】：

（对不起，我不能评论）。

您的问题可能是填充规则。尝试更改以检查可点击区域是否也发生变化。

【讨论】：