Twitter 和 Facebook 共享按钮错位答案

【问题标题】：Twitter & Facebook Share Buttons MisalignedTwitter 和 Facebook 共享按钮错位
【发布时间】：2014-07-28 20:40:08
【问题描述】：

我在每个帖子的底部添加了一个 facebook 和 twitter 分享按钮，但是这两个按钮错位了大约 3px，我不知道如何使它们相互对齐。

我尝试向 Facebook 小部件添加负边距，也尝试向 Twitter 小部件添加正边距。浏览器两次都会忽略它（即使我使用了 !important）。

您可以在此处查看问题：http://cantstopshipping.com

有人知道如何解决这个问题吗？

这是我的代码：

HTML：

<!--FACEBOOK SCRIPT-->
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=258039414242053&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!--/ FACEBOOK SCRIPT-->
    <!--TWITTER SCRIPT-->
    <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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    <!--/ TWITTER SCRIPT-->

<div class="sharepost">
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-via="CantStopShippin" data-hashtags="<?php $category = get_the_category(); echo $category[0]->cat_name; ?>" data-count="vertical">Tweet</a>
      <div class="fb-share-button" data-href="<?php the_permalink() ?>" data-type="box_count"></div>
</div>

这是我尝试添加以解决问题的 CSS：

.fb-share-button {
    margin-top: -2px !important;
}

另外，.sharepost 的 CSS（里面是 chare 按钮）是：

.sharepost {
width: 325px;
height: 65px;
float: right;
text-align: center;
margin-top: 3px;
}

【问题讨论】：

包含此按钮的对象的样式是什么。我发现您的问题是由浏览器引起的。因为在 IE 中它们是正确对齐的
@HKK 我不知道，因为样式都包含在 Facebook 端。检查器中显示的仅有两个是： .fb_iframe_widget { display: inline-block;位置：相对； }
不，我的意思是按钮周围有什么？我认为这是因为，facebook 是一个 div，而 twitter 是一个 iframe
@HKK 我已将 .sharepost CSS 添加到问题中。这就是共享按钮周围的内容。
将vertical-align: top; 添加到.fb_iframe_widget 应该可以解决问题。

标签： html css facebook twitter

【解决方案1】：

您可以尝试将按钮设置为td，每个按钮在一个<td>中。

示例...http://jsfiddle.net/QC6J6/8/

【讨论】：

【解决方案2】：

好的，在 reset.css 中将 margin: 0px; 替换为 margin-top: -5px; (: 或将其替换为您想要的任何 px 数量，但它必须为负数。

【讨论】：

或者按照@Filly 说的做。

【解决方案3】：

将vertical-align: top; 添加到.fb_iframe_widget 应该可以解决问题。

【讨论】：