4 pixel offset of “Like” button

问题:

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; }