Question

我有一个客户端页面，我在Firefox上显示以下内容：

然而，在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;}

我已经尝试了我能想到的所有属性组合，以使其工作，但无济于事。

有什么想法吗？

谢谢！

Answer 1

使用vertical-align: top：

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

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

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

1 个答案: