Facebook和Twitter按钮错位

Question

该页面包含两个按钮,分别来自twitter和facebook.

我在Firefox 3.5.15中观察到的是:

1. 页面加载时,按钮或多或少对齐(我的意思是它们的底边)
2. 加载页面时,Facebook按钮向下移动几个像素,使其底部低于twitter按钮的底部.
3. 如果我重新加载页面,按钮将再次对齐,即使在加载页面后仍保持此状态.

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

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>

我还必须添加缩放:1和*显示:内联IE7黑客,以便按钮并排显示

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

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

Answer 4

我通过添加facebook iframe position: relative; top: 4px;的style属性来修复此问题.

所以,它看起来像这样:

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

不完美的解决方案,但它的工作原理.

Answer 5

至少从今天开始,似乎问题来自于<span>javascript在其中生成的标记的奇怪对齐.fb-share-button <div>.这是我的修复:

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