Question

该页面包含两个按钮，分别来自twitter和facebook。

我在Firefox 3.5.15中观察到的是：

在页面加载时，按钮或多或少对齐（我的意思是它们的底边）
当页面加载时，facebook按钮会向下移动几个像素，因此它的底部低于twitter按钮的底部。
如果我重新加载页面，按钮会再次对齐，即使在页面加载后也会保持此状态。

有人可以解释一下发生了什么以及如何解决这个问题吗？

Answer 1

找到了推动它的风格..

如果您使用FireBug并向下滚动到FB按钮中的iframe。

此CSS样式

.fb_iframe_widget iframe

有这个元素

vertical-align: text-bottom;

那是推动它的人。

您可以使用以下选择器组合和！important

覆盖CSS样式

.twitter-share-button[style] { vertical-align: text-bottom !important; }

Answer 2

我通过添加vertical-align：top来修复此问题（这是在使用新的HTML5标记时）。我的facebook按钮代码现在看起来像：

<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-     show-faces="false" style="vertical-align:top;zoom:1;*display:inline"> </div>

我还必须添加缩放：1和*显示：内联IE7黑客，以便按钮并排显示

Answer 3

我只是将所有图标都包含在div中，然后在该div上设置行高，使它们全部排列（因为它们都是相同的高度，有些与顶部对齐，有些与底部对齐）

<div class="product-social-links">
    <a href="//www.pinterest.com/pin/create/but [...] >
       <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
    </a>

    <div class="fb-like" data-href="@Request.Url.AbsoluteUri" [...] ></div>

    <a href="https://twitter.com/share" class="twitter-share-button" [...] >Tweet</a>
</div>

然后是CSS

#product-details-page  .product-social-links {
    line-height: 10px;
}

Answer 4

我通过将position: relative; top: 4px;添加到facebook iframe的style属性来解决此问题。

所以，它看起来像这样：

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;layout=box_count&amp;show_faces=true&amp;width=110&amp;action=recommend&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="position: relative; top: 4px; border:none; overflow:hidden; width:110px; height:65px;" allowTransparency="true"></iframe>

一个不完美的解决方案，但它确实有效。

Answer 5

至少从今天开始，问题似乎来自于<span>内javascript生成的.fb-share-button <div>标记的奇怪对齐。这是我的修复：

.fb-share-button span {
   top: -6px;
}

Answer 6

我意识到这些问题是在不久前发布的，但这是我使用的解决方案。

.twitter-share-button {
      position:relative;
      top:6px;
      }

Answer 7

您可以使用CSS轻松解决此问题：

iframe { float: left; padding-right: 10px; }

EIDT：如果你想让它们居中，只需将它们包装在一个div中（它们已经包装好了，给它一个类或一个ID。例如，让它给它一类twfb对于twitter / facebook。现在在CSS中我们将声明宽度和自动边距：

.twfb { width: 120px; margin: 0 auto; }

编辑2：要从Facebook中删除大边距，只需将其添加到您的CSS：

.fb_edge_widget_with_comment { margin-left: -26ppx; }

这应该使它们很好并且彼此接近。

应该这样做！

祝你好运

Answer 8

这对我来说很有魅力：

.twitter-share-button[style] { vertical-align: middle !important; }

Answer 9

这里的问题不是位置，高度或任何其他CSS，而是采用错误垂直对齐的内联块元素。 facebook元素是vertial-align：top，twitter元素是vertical-align：bottom。可以用一行CSS修复，但必须使用正确的选择器和！importantoverride JS应用内联样式。

iframe[style] { /* to select the outer-most element of the twitter button */
    display: inline-block;
    vertical-align: bottom !important;
}

Answer 10

.fb_iframe_widget {
  span {
   vertical-align: initial !important;
  }
}

为我工作

Answer 11

我不能告诉你那里发生了什么，我甚至不想考虑< fb:headache >那里有什么，但你应该能够通过浮动iframe for if button来解决这个问题离开并添加一些margin-right以获得原始回顾。

iframe.twitter-share-button { float: left; margin-right: 4px; }

这有点hackish，但应该这样做。

<强>更新

.fb_iframe_widget { display: block !important; } 
// leave important away if possible!

// change main.css / line 41:
div.text {
    clear: left;
    margin: 0 auto;
    padding: 35pt 5pt 15pt;
    width: 40em;
}

Answer 12

Twitter和facebook按钮可以垂直对齐固定

 vertical-align: top !important;

Answer 13

我知道有很多答案，但是由于我在努力解决这个问题并且没有一个在这里为我工作，我想我会增加2美分......正如已经提到的，span有{ {1}}你需要覆盖它。我必须说，即使它与CSS理论背道而驰，如果你能简单地“关闭”像这样的CSS规则，那真是太好了。我的意思是，到底是什么FB？图标工作一天;但不是下一个。这是我从未听说过的最愚蠢的事情。

总之...

vertical-align: bottom;

......为我做了。

Answer 14

然后回到这里的第一个解决方案。

＆＃34;顶部＆＃34;也行。

这是我对joomla插件的解决方案（参见http://www.compago.it/software/41-compago-software/347-facebook-twitter-google1-plugin-for-joomla.html）：

.fb_iframe_widget span {
vertical-align: top !important;
}

Answer 15

我通过Guðmundur Þór Magnússon的answer并将margin-bottom: -2px !important;添加到CSS规则来解决了这个问题：

.twitter-share-button[style] {
    vertical-align: text-bottom !important;
    margin-bottom: -2px !important;
}

Answer 16

在此处使用此代码使其工作，请参阅垂直对齐部分。相应地更改数字（当前为7）：

<div class="fb-like" data-width="30" data-layout="button" data-action="like" data-show-faces="false" data-share="true" style="vertical-align:7px"></div>

Answer 17

我所做的就是将CSS添加到我的页面中：

div.fb_iframe_widget > span {
    vertical-align: unset !important;
}

这比这里的一些答案更少见，并且将更改隔离到仅撤消Facebook共享图标上的高度调整。

Answer 18

现在，2020年9月，Facebook发生了新变化。无论大小按钮，按钮高度始终为28px。

要对齐按钮：

步骤1：将两个按钮都放在div内

<div class="socialMedia">
     <div id="fb-root"></div>
     <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0" nonce="1lGOwZCs"></script>
     <div class="fb-like" style="padding-right:4px" data-href=...></div>
     <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-url=...>Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

步骤2a：将div的行高设置为11px
或
步骤2b：将字体大小设置为1px

.socialMedia {
    float: right;
    width: 250px;
    display: block;
    padding-top: 25px;
    text-align: right;
    line-height: 11px
}

或

<div class="fb-like" style="font-size:1px;display:inline-block;"...</div>

第3步：将高度设置为20px
在Facebook div中生成的跨度被强制具有与Twitter iframe相同的高度20px：

div.fb_iframe_widget > span {
    height: 20px !important
}

以上值适用于小按钮。对于大按钮，必须正确更改值。

Facebook＆amp;的错位Twitter按钮

18 个答案: