谷歌登录按钮的宽度和高度问题

Google signin button width and height issue

本文关键字：高度 问题 登录 按钮 谷歌      更新时间：2023-09-26

我正在尝试在我的一个应用程序中使用谷歌登录按钮。我在Chrome上得到了这个工作fonr。但是，当我尝试在Firefox和IE中包含此按钮的页面时，该按钮从未出现，并且在进一步的故障排除中，我注意到高度，宽度和其他参数设置为" 1px"。我已经复制了下面生成的 HTML。有什么线索吗？

<div id="___signin_0" style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 1px; position: relative; height: 1px;"><button style="opacity: 0; z-index: 10000; left: 0px; top: 0px; position: absolute; cursor: pointer; outline: 0px none; width: 1px; height: 1px;">Sign in with Google</button><iframe title="Sign in with Google" data-gapiattached="true" src="https://apis.google.com/_/widget/render/signin?usegapi=1&amp;type=red&amp;scope=profile%20email&amp;width=standard&amp;height=standard&amp;cookiepolicy=single_host_origin&amp;clientid=xxxxxxxx.com&amp;origin=http%3A%2F%2Flocalhost%3A2098&amp;url=http%3A%2F%2Flocalhost%3A2098%2F&amp;gsrc=3p&amp;ic=1&amp;jsh=m%g#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I0_12343&amp;parent=http%3A%2F%2Flocalhost%3A2098&amp;pfname=&amp;rpctoken=42643494" name="I0_1234455" id="I0_1234455" vspace="0" tabindex="0" style="position: static; top: 0px; width: 1px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 1px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" frameborder="0" width="100%"></iframe></div>

编辑：我的呈现按钮的代码如下所示：

 <span id="signinButton" style="display:block">
                  <span                    
                    class="g-signin"
                    data-callback="signinCallback"
                    data-clientid="xxxxxxxxxxxxxxxx.com"
                    data-cookiepolicy="single_host_origin"                                        
                    data-height="standard"
                    data-width="standard"
                    data-scope="profile email">
                  </span>
                </span>

我已经做了很多搜索来做到这一点，但是，我认为谷歌的iframe根本无法改变。您可以设置最小宽度，但不能更改宽度本身，也不能更改最大值（默认为 400）。高度根本无法更改。遗憾的是，他们正在删除旧的javascript按钮（可能是因为人们进行了很多错误的配置？），他们真的需要使样式完全可定制。如果有人有解决方案，也让我知道，但我可以在大量搜索和阅读他们的文档后说这是不可能的（还）

Google

不允许人们更改他们的徽标或样式，这就是为什么您提供的任何样式都会被 Google 脚本覆盖的原因我认为这个网址可能会有所帮助https://developers.google.com/identity/sign-in/web/build-button

当我

发现登录按钮的data-width属性可以设置为数字而不是standard时，我正在查看Google的代码生成器。下面是一个代码示例：

<span id="signinButton" style="display:block">
                  <span                    
                    class="g-signin"
                    data-callback="signinCallback"
                    data-clientid="xxxxxxxxxxxxxxxx.com"
                    data-cookiepolicy="single_host_origin"                                        
                    data-height="standard"
                    data-width="400"
                    data-scope="profile email">
                  </span>
                </span>

我注意到你使用了<span>标签，而在我的情况下，我使用了<div> s。

相关文章：