社交图标的 CSS 对齐 - Chrome/Safari 特定答案

【问题标题】：CSS Alignment for Social Icons - Chrome/Safari Specific社交图标的 CSS 对齐 - Chrome/Safari 特定
【发布时间】：2012-06-30 01:49:43
【问题描述】：

我有一个客户端页面，其中我有以下在 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>

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

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

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

有什么想法吗？

谢谢！

【问题讨论】：

请不要使用网址缩短器。使用 imgur 上传屏幕截图（编辑器中的 Ctrl+G，或按编辑器上方的图像按钮）。编辑：将图片上传到 imgur，然后编辑您的问题。
这里是imgur中的链接：imgur.com/a/AKMqj

标签： google-chrome css safari alignment

【解决方案1】：

使用vertical-align: top:

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

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

【讨论】：