reCAPTCHA 导致在 RTL 页面上出现长时间的水平滚动

Question

当用户在 reCAPTCHA v2 中点击 "I'm not a robot" 时，它会向页面添加一个 div，如下所示：

<div style="display: block; visibility: hidden; position: absolute; width: 414px; left: -10000px; top: -10000px; height: 610px; z-index: 2000000000;">

div 包含另一个 div 和 gc-bubbleDefault class。由于 left: -10000px; top: -10000px;.

导致水平滚动太长

如何避免 Google reCAPTCHA 破坏我的网站？

看看 firebug window。您可以看到 div 在 body 关闭标记之前附加到页面。

编辑

我发现这个问题只发生在 RTL 页面上，因为元素的负左 -10000px。为 Google 使用如此愚蠢的想法感到羞耻。

有什么办法解决吗？

Answer 1

在 div 上给 overflow: hidden;。

<div style="display: block; visibility: hidden; position: absolute; width: 414px; 
            left: -10000px; top: -10000px; height: 610px; z-index: 2000000000;
            overflow: hidden;">

所以，将它放在 <div class="reCaptcha-Wrapper"> 中并应用这些样式：

.reCaptcha-Wrapper div {overflow: hidden;}

我可以看到您的文档中有一个 dir="rtl"。这也可能会导致问题。你能删除它并检查它是否有效吗？如果你不能删除它，你可以用 CSS:

body > div:last { direction: rtl; }
#colorbox + div { direction: rtl; }

或使用JavaScript:

$(function () {
  $("body > div").last().css("overflow", "hidden");
});

Answer 2

我遇到了同样的问题，我通过添加

解决了这个问题

overflow-x: hidden;

到正文元素。

this article可以帮你扔这个

希望对您有所帮助

Answer 3

我不想弄乱父溢出css，所以我的解决方案是在徽章中添加right: 0!important：

      .grecaptcha-badge {
        visibility: hidden;
        right: 0!important;
      }

如果包装纸的宽度大于徽章本身的宽度，此解决方案就足够了。