Facebook和Twitter按钮的错位问题

Question

该页面包含两个按钮，一个来自Twitter，另一个来自Facebook。

我在Firefox 3.5.15中观察到的情况是：

1. 当页面正在加载时，按钮更或多或少地对齐（我的意思是它们的底边）。
2. 当页面加载完成后，Facebook按钮向下移动了几个像素，因此它的底部比Twitter按钮的底部更低。
3. 如果我重新加载页面，按钮再次对齐，并且即使在页面加载完成后也保持这种状态。

有人能否解释一下发生了什么以及如何解决？

- Roman Cheplyaka

Answer 1

我通过添加vertical-align:top来解决了这个问题（当时我正在使用他们新的HTML5标记）。现在我的Facebook按钮代码看起来像这样：

<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-     show-faces="false" style="vertical-align:top;zoom:1;*display:inline"> </div>

我还得加上zoom:1和*display:inline的IE7 hack才能让按钮并排显示。

- vandre

---

他们应该把你的脸放在钞票上。谢谢。 - ppp

最佳答案肯定，截至2014年5月27日仍然是有效的答案。 - Karl

对我也起作用了。谢谢！ - Anmol Gupta

很好的回答，我尝试了被标记为解决方案的那个，但它没有起作用，做得好！ - Alex

Answer 2

找到了将其向下推的样式..

如果您使用FireBug并向下滚动到FB按钮中的iframe。

这个CSS样式

.fb_iframe_widget iframe

这个元素是否存在

vertical-align: text-bottom;

那就是将它往下推的人。

你可以使用以下选择器和 !important 来覆盖 CSS 样式

.twitter-share-button[style] { vertical-align: text-bottom !important; }

- Guðmundur Þór Magnússon

---

我几周前实现了这个解决方案，并且它完美地工作了（因此点赞），但是今天（2013年5月16日）我刚刚注意到按钮再次对齐不正确。我认为Facebook进行了一些更改，现在如果我从我的.twitter-share-button类中删除text-bottom声明，它们就可以再次完美地对齐。 - indextwo

若需查看2015年的解决方案，请参考“Dan dot net”所提供的简明优秀答案。 - consideRatio

Answer 3

我只是将所有图标放在一个div中，然后设置该div的行高，以使它们都对齐（因为它们的高度相同，有些与顶部对齐，有些与底部对齐）

<div class="product-social-links">
    <a href="//www.pinterest.com/pin/create/but [...] >
       <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
    </a>

    <div class="fb-like" data-href="@Request.Url.AbsoluteUri" [...] ></div>

    <a href="https://twitter.com/share" class="twitter-share-button" [...] >Tweet</a>
</div>

然后就是CSS

#product-details-page  .product-social-links {
    line-height: 10px;
}

- Dan dot net

---

2015年：非常好的回答！ - consideRatio

2017年：仍然是最佳答案。 - leymannx

我不得不使用11像素。在3个浏览器中进行了测试，设置非常相似。怎么回事？ - greeble31

它已经改变了。现在是11像素。 - Houman

2019年，只有在删除#product-details-page后才能为我工作。同时，请使用11px字体大小。 - brucemax

Answer 4

我通过在Facebook iframe的style属性中添加position: relative; top: 4px;来解决了这个问题。

因此，它看起来像这样：

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;layout=box_count&amp;show_faces=true&amp;width=110&amp;action=recommend&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="position: relative; top: 4px; border:none; overflow:hidden; width:110px; height:65px;" allowTransparency="true"></iframe>

一个不完美的解决方案，但它能够工作。

- Gezim

---

经过长时间的挣扎，终于完美地解决了问题。 - batoutofhell

Answer 5

今天看起来至少，问题似乎源于javascript在.fb-share-button <div>中生成的<span>标签的奇怪对齐。这是我的解决方法：

.fb-share-button span {
   top: -6px;
}

- Steven Clontz

---

截至2014年11月20日，这是我能够让其正常工作的唯一解决方案。 - JWPersh

Answer 6

我知道这个问题发布已经有一段时间了，但是这里是我使用的解决方案。

.twitter-share-button {
      position:relative;
      top:6px;
      }

- Digital Robot Gorilla

Answer 7

Twitter和Facebook按钮可以垂直对齐固定

 vertical-align: top !important;

- Pan Bouradas

Answer 8

这对我来说非常有效：

这个方法对我来说非常有效：

.twitter-share-button[style] { vertical-align: middle !important; }

- andres.arslanian

Answer 9

您可以通过CSS轻松解决此问题： iframe { float: left; padding-right: 10px; } 编辑：如果您想要将它们居中，只需将它们包装在一个div中（它们已经被包装了），为该div添加类或ID。例如，我们给它一个名为twfb的类，现在在CSS中声明宽度和自动边距如下： .twfb { width: 120px; margin: 0 auto; } 编辑2：要从Facebook中删除大的边距，只需将以下内容添加到您的CSS中： .fb_edge_widget_with_comment { margin-left: -26ppx; } 那样它们应该能很好地对齐。

就这样！祝你好运！

- Amit

---

你可以通过添加iframe的类来更具体地说明，但我希望你那里没有那么多的iframes... - Amit

谢谢您的回答。我希望这些按钮能够居中显示在一个 div 中，您的解决方案可以适应这种情况吗？ - Roman Cheplyaka

谢谢。在尝试浮动后，我得到了以下结果：http://ro-che.info/ccc/11.html。虽然还不完全符合我的要求（按钮似乎是通过它们的上边而不是下边对齐的），但更让我困扰的是Facebook按钮前面有很大的空间。我该如何消除它？此外，您能否解释一下（或指向一个解释），为什么浮动在这里有帮助？ - Roman Cheplyaka

另外，我刚在Konqueror中检查了一下——文本从按钮的右侧开始而不是下方。如何解决这个问题？ - Roman Cheplyaka

@Roman：同时也要表扬你的有趣漫画连环画。我非常喜欢它们！ - Amit

Answer 10

我无法告诉你里面发生了什么，也不想去想 < fb:headache > 在那里做了什么，但是你应该可以通过将 Twitter 按钮的 iframe 向左浮动并添加一些 margin-right 来解决此问题，以恢复原始外观。

iframe.twitter-share-button { float: left; margin-right: 4px; }

这有点hackish，但应该可以。

更新

.fb_iframe_widget { display: block !important; } 
// leave important away if possible!

// change main.css / line 41:
div.text {
    clear: left;
    margin: 0 auto;
    padding: 35pt 5pt 15pt;
    width: 40em;
}

- polarblau

---

谢谢您的回答。我希望这些按钮能够居中显示在一个 div 中，您的解决方案可以适应这种情况吗？ - Roman Cheplyaka

嗯，我猜你需要再加一个 div 包裹这两个按钮，宽度刚好能容纳它们，然后使用 margin: 0 auto 将这个 div 在其父 div 中居中。 - polarblau

谢谢。在尝试浮动后，我得到了以下结果：http://ro-che.info/ccc/11.html。虽然还不完全符合我的要求（按钮似乎是通过它们的上边而不是下边对齐的），但更让我困扰的是Facebook按钮前面有很大的空间。我该如何消除它？此外，您能否解释一下（或指向一个解释），为什么浮动在这里有帮助？ - Roman Cheplyaka

另外，我刚在Konqueror中检查了一下——文本从按钮的右侧开始而不是下方。如何解决这个问题？ - Roman Cheplyaka

请检查我的更新。这些元素具有不同的大小，这使得无法将它们在顶部和底部对齐。我会进行微调，例如使用边距来满足您的需要。 - polarblau