Question

当用户点击reCAPTCHA v2中的“我不是机器人”时，它会向页面添加div，如下所示：

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

div包含另一个div类gc-bubbleDefault。由于left: -10000px; top: -10000px;，它会导致如此长的水平滚动。

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

看看萤火虫的窗口。您可以在body关闭标记之前看到附加到页面的div。

修改

我发现由于元素的负左-10000px，这个问题只发生在RTL页面上。谷歌因使用这种白痴的想法而感到羞耻。

有解决方法吗？

Answer 1

在overflow: hidden;上提供div。

<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可以帮助你抛出这个。

希望它可以帮到你

reCAPTCHA在RTL页面上导致长水平滚动

2 个答案: