html - 多个 <div> 未对齐并彼此重叠

Question

我的网站是cg-its.com

我似乎无法让 Facebook 社交图标与其他图标完美搭配。

我曾尝试使用 CSS 来对齐所有按钮，但出于某种原因它想要位于其他按钮之上!

这是 HTML/PHP:

<div class="container">
  <div class="four columns">
    <?php if($data['text_callus'] != "") { ?>
    <div class="callus"><?php echo $data['text_callus']; ?></div>
    <div class="clear"></div>
    <?php } ?>
  </div>
  <div class="twelve columns">
    <div class="socialshare">
      <div class="facebookshare">
        <div class="fb-like" data-href="http://www.facebook.com/ConradGoodmanIT" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
      </div>
      <a href="https://twitter.com/ConradGoodmanIT" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @ConradGoodmanIT</a>
      <script>
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
      </script>
      &nbsp; &nbsp;
      <!-- Place this tag where you want the +1 button to render. -->
      <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120" data-href="http://www.cg-its.com"></div>
      <!-- Place this tag after the last +1 button tag. -->
      <script type="text/javascript">
        window.___gcfg = {lang: 'en-GB'};

        (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
            po.src = 'https://apis.google.com/js/platform.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();
      </script>
    </div>
  </div>
</div>

和 CSS

.container .twelve.columns .socialshare {
  float: right;
  margin-top: 10px;
 }

.container .twelve.columns .socialshare .facebookshare {
  margin-top: 0px;
  display: inline;
 }

Answer 1

我无法解释(如果有人可以，请发帖，然后我会删除这个)，但是如果我把 overflow:hidden; height:20px 在两个 div 上，问题都消失了(在 firefox 26 上)。

在我看来像是一个错误...我不明白溢出如何导致上边距。