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

我还必须添加 zoom:1 和 *display:inline IE7 hack，以便按钮并排显示