ReCaptcha溢出/超出屏幕

Question

我该如何解决这个问题？有时候它确实正常工作，但更多的时候我会看到像这样的错误。我已经尝试过更改CSS，但只改变了按钮比例而不是图像选择。以下是我的按钮HTML代码：<div class="g-recaptcha col-lg-12" data-sitekey="#####" data-callback="automationRecaptchaCb" align="center"></div>。

验证码图片太高了，我找不到我要找的内容。 验证码图片太低了，我无法提交验证码。

- Владимир Голошивский

Answer 1

我实际上找到了一个可行的解决方案，希望能帮助到其他人，我将其添加到我的网页样式中。

@section PageStyles{
<style type="text/css">

.g-recaptcha > div {
width: 100% !important;
    }

.g-recaptcha > div > div {
margin: 4px auto !important;
/*text-align: center;*/
width: auto !important;
height: auto !important;
}

.g-recaptcha iframe {
transform: scale(0.85);
-webkit-transform: scale(0.85);
transform-origin: left top;
-webkit-transform-origin: left top;
}
#rc-imageselect {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}

/*-- Pantallas superiores a 480px --*/
@@media(min-width: 480px){
#rc-imageselect {
transform: none;
-webkit-transform: none;
}

.g-recaptcha iframe{
max-width: none;
transform: none;
-webkit-transform: none;
}
}
</style>
}

- Владимир Голошивский

Answer 2

我不知道为什么会发生这种情况，但是这段代码对我有效：

.cdk-global-scrollblock {
  position: initial !important;
  overflow: hidden !important;
}

- Thiago Galeno