Question

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

我已经尝试调整margin-top，vertical-alignment css等等。似乎什么都没有移动这个按钮。

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

Answer 2

我已经使用了它，它似乎一致地工作，对其他浏览器的呈现没有任何伤害：

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

“喜欢”按钮的4像素偏移

2 个答案: