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

Question

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

http://cl.ly/0u0h1S110f2J2N2E093d（屏幕截图）

但是在 Chrome 和 Safari 上它显示如下：

http://cl.ly/0a132U3h1G2x1W3R0043（注意 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>

我有以下适用于 FF 的 CSS，但不适用于其他两个浏览器：

div.social div div {display: inline-block;}
div.social div div.fb {margin-bottom: 1px;}

我已经尝试了所有我能想到的属性组合来使它起作用，但无济于事。

有任何想法吗？

谢谢！

Answer 1

使用vertical-align: top：

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

工作示例：http: //jsfiddle.net/dFt8N/