“Like”按钮的 4 像素偏移答案

【问题标题】：4 pixel offset of "Like" button“Like”按钮的 4 像素偏移
【发布时间】：2011-09-22 10:03:32
【问题描述】：

我想排列我网站上的所有社交媒体按钮。 LinkedIn、GoogleOne 和 Twitter 按钮都垂直对齐，但我似乎无法弄清楚为什么 FaceBook 的“Like”按钮会向下跳 4 个像素。

我已经尝试调整 margin-top、vertical-alignment css 等。似乎没有任何东西可以将这个按钮向后移动。

【问题讨论】：

你能展示你的css吗？您的目标是 Facebook 标签 (fb:...) 还是生成的 iframe？

【解决方案1】：

我遇到了同样的问题。这是我的类似 fb 的按钮代码：

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

我能想到的唯一解决方案是手动将按钮偏移几个像素。我将上面的块包含在一个 div 中，并将其向上推了几个像素：

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

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

【讨论】：

最好的部分是移动 webkit 在桌面上很好时如何将其渲染 3 个像素。 FML

【解决方案2】：

我已经使用过它，它似乎可以始终如一地工作，而不会损害其他浏览器的演示：

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

【讨论】：