渲染G +登录按钮时出现问题

Question

它没有达到理想的形状。

理想的外观

什么是节目

所需状态的CSS和HTML

<span id="gp" class="gplus customGPlusSignIn"></span>


#social span{

width:45px;
height:45px;
cursor:pointer;
background-size: cover; 
position:absolute;

border-radius: 50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
}
.gplus{
background: transparent url('asdsadasdfsd/gplus.png') no-repeat left top;
}

按钮的JS

<script type="text/javascript">
  (function() {
    var po = document.createElement('script');
    po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/client:plusone.js?onload=render';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
  })();

  function render() {
    gapi.signin.render('gp', {
      //'callback': 'signinCallback',
      'clientid': '<hipitihop>.apps.googleusercontent.com',
      'cookiepolicy': 'single_host_origin',
      'requestvisibleactions': 'http://schemas.google.com/AddActivity',
      'scope': 'https://www.googleapis.com/auth/plus.login'
    });
  }
</script>

出了什么问题，我无法渲染按钮？

Answer 1

嗯，似乎需要另一个锚点。以下作品

  <div id="customBtn" class="customGPlusSignIn">
      <span id="gp" class="gplus"></span>
    </div>

感谢@Dyllen James Owens建议JSfiddle。

您可以在小提琴http://jsfiddle.net/mHcdv/3/

中找到代码