Google reCAPTCHA v2移动端适配问题：部分设备验证按钮不可访问

问题分析 #

你遇到的是reCAPTCHA v2在部分移动设备上的适配问题：验证按钮无法被访问，核心原因是组件内部一个无ID、无类名的div元素被设置了固定的left:161.68px样式，导致按钮偏移出可视区域或被遮挡。

解决方案 #

以下是几种直接可行的修复方案：

1. 通过CSS层级选择器覆盖定位样式 #

利用reCAPTCHA容器的默认类名g-recaptcha，结合元素层级定位目标div，在移动端媒体查询中重置其定位：

/* 针对移动端屏幕（宽度≤768px）调整 */
@media (max-width: 768px) {
  .g-recaptcha > div:nth-child(1) > div {
    left: 0 !important;
    transform: none !important;
  }
}

提示：你需要通过浏览器开发者工具确认目标div的层级索引（nth-child的数值），确保选择器精准命中目标元素。

2. 重置容器定位上下文 #

给reCAPTCHA的父容器设置相对定位，约束内部元素的定位范围，避免偏移溢出：

.g-recaptcha {
  position: relative !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .g-recaptcha > div {
    position: static !important;
  }
}

3. JavaScript动态修正样式 #

如果CSS选择器难以精准定位，可通过JS检测并修改目标元素的样式：

// 等待reCAPTCHA组件加载完成后执行
window.addEventListener('load', function() {
  const recaptchaContainers = document.querySelectorAll('.g-recaptcha');
  recaptchaContainers.forEach(container => {
    // 遍历容器内的div，找到设置了固定left值的元素
    const divs = container.querySelectorAll('div');
    divs.forEach(div => {
      const computedLeft = window.getComputedStyle(div).left;
      if (computedLeft === '161.68px') {
        div.style.left = '0';
        // 移动端额外适配
        if (window.innerWidth <= 768) {
          div.style.transform = 'translateX(0)';
        }
      }
    });
  });
});

4. 排查全局样式冲突 #

检查页面是否存在全局CSS规则（如强制所有div使用绝对定位）污染reCAPTCHA组件，若有需添加例外规则：

/* 避免全局定位规则影响reCAPTCHA */
.g-recaptcha div {
  position: initial !important;
}

内容的提问来源于stack exchange，提问作者mr javad