使用 iframe 时删除“Google 登录”的填充

Question

我需要嵌入使用谷歌登录的按钮。我的问题是，当 Google 识别我的帐户并使用带有我的信息的个性化按钮时，它使用的 iframe 填充不良。

我的代码如下所示：

<div id="g_id_onload"
         data-auto_select="false"
         data-client_id="-"
         data-context="signin"
         data-ux_mode="redirect"
         data-login_uri="-"
         data-auto_prompt="false">
</div>
<div class="g_id_signin"
         data-type="standard"
         data-shape="rectangular"
         data-theme="filled_blue"
         data-text="continue_with"
         data-size="large"
         data-logo_alignment="center">
</div>

如果使用个性化按钮，结果如下（如果无法识别，按钮看起来一切都很好）：

正如您在深色主题中看到的那样，很明显，Google iframe 内的按钮周围有一个白色填充。有什么办法解决这个问题吗？

Answer 1

我已经通过用外部 div 包装“g_id_signin”并隐藏溢出来解决这个问题：

div class="flex justify-center">
  <div class="w-[219px] h-[41px] rounded-full overflow-hidden">
    <div 
      class="g_id_signin"
      data-type="standard"
      data-shape="pill"
      data-theme="filled_white"
      data-text="continue_with"
      data-size="large"
      data-logo_alignment="center"
      >
    </div>
  </div>
</div>

其中“w-[219px] h-[41px] rounded-full Overflow-hidden”是用于设置div宽度和高度的tailwindcss类，围绕边框（因为我正在使用圆形谷歌按钮）并且大多数情况下重要的是，隐藏溢出。您可以使用 vanilla css 轻松实现相同的结果。