CSS对齐的社会图标 - 铬/ 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> 

我有以下的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/