Google reCAPTCHA要么不可点击，要么带有白色容器

Question

我发现了一个让我疯狂的问题。 为了避免垃圾邮件，我在我的网站上实施了 Google reCAPTCHA 并将其添加到我的表单中。我目前正在使用javascript这样的话：

头脑中：

<script type="text/javascript">
    var captchaContainer = null;
    var loadCaptcha = function () {
        captchaContainer = grecaptcha.render('recaptcha', {
            'sitekey': '[myKey]',
            'callback': function (response) {
                console.log(response);
            }
        });
    };
</script>

在身体里（以我的形式）：

<form action="validation.php" method="POST">
    <input placeholder="Your Name" type="text" name="name" />
    // ...
    <div id="recaptcha"></div>
    <input type="submit" id="submitButton" name="submit" value="absenden" />
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>

但不幸的是，小部件在 reCAPTCHA 下方呈现了一些空格，如此屏幕截图所示：

我已经尝试向z-index: -1添加#recaptcha div，然后它看起来就像我想要的那样，但它不再可以点击了。

有人可以告诉我，我做错了吗？

Answer 1

不确定定位是否存在完全相同的问题。在我的页面上，recaptcha隐藏在<p>元素后面，这不允许点击，因为几乎所有表单元素都使用float。所以尝试使用

#recaptcha{ clear: both; }

防止叠加和无法定位的行为。或者，如果需要，可以为其分配浮动。

Answer 2

我在这里遇到此问题，就我而言，当在DevTools中激活“设备工具栏”时，它不适用于Chrome。只需禁用设备工具栏即可使Recaptcha重新工作，并且我已经确认它确实可以在实际设备中工作。看起来像是DevTools中的错误。

这是一个非常烦人的行为，我无法真正解决它，但是这个发现使我继续关注更重要的问题，因为这在生产中不会成为问题。

Answer 3

找到解决方案。是的，这是 Chrome DevTools 和移动屏幕模拟器中的错误。您可以修复它 - 将设备比例从 75% 更改为 100%。假设使用缩放时 iframe 和触摸坐标存在此问题。