Google chrome 社交图标的CSS对齐-特定于Chrome/Safari

我有一个客户端页面，其中我有以下内容，在Firefox上显示得非常好：

（截图）

然而，在Chrome和Safari上显示如下：

（注意Facebook的共享按钮）

按钮的代码为：

<div class="social">
  <div>
    <div class="fb"> <a name="fb_share" id="fb_share" type="button"></a>
      <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </div>
    <div class="twit"> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
  </div>
</div>

我已经尝试了我能想到的所有属性组合来实现这一点，但都没有效果

有什么想法吗

---

谢谢

使用

垂直对齐：顶部

：

div.social div div.fb {
    vertical-align: top;
}

工作示例：

请不要使用URL缩写。使用imgur上传屏幕截图（在编辑器中按Ctrl+G，或按编辑器上方的图像按钮）。编辑：将图片上传到imgur，并编辑您的问题。以下是imgur中的链接：

div.social div div.fb {
    vertical-align: top;
}