4 pixel offset of “Like” button

房东的猫 提交于 2019-12-13 09:06:14

问题


I would like to line up all of the social media buttons on my site. The LinkedIn, GoogleOne and Twitter buttons all align vertically, but I can't seem to figure out why the FaceBook "Like" button jumps down 4 pixels.

I've tried adjusting the margin-top, the vertical-alignment css, etc. Nothing seems to move this button back up.


回答1:


I had the same problem. Here's my fb-like button code:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="mysite.com" data-send="false" data-layout="button_count" data-width="30" data-show-faces="false" data-font="arial"></div>

The only solution I could come up with is to manually offset the button a few pixels. I enclosed the above block in a div, and pushed it up a few pixels:

.shareable {
    height: 20px;
    display: inline-block;
}

.shareable .fb-like {
    top:-3px;
}



回答2:


I've used this and it seems to work consistently with no harm to other browsers presentation:

.fb-like { line-height: 0; }


来源:https://stackoverflow.com/questions/7513009/4-pixel-offset-of-like-button

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!