Facebook和Twitter按钮错位

Posted 2021-05-05

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

我在Firefox 3.5.15中观察到的是：

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

有人可以解释一下发生了什么以及如何解决它？

答案

找到了推动它的风格..

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

这种CSS风格

.fb_iframe_widget iframe

有这个元素

vertical-align: text-bottom;

那就是那个推低它的人。

您可以使用以下选择器和！important组合覆盖CSS样式

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

另一答案

这里的问题不是位置，高度或任何其他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;
} 

另一答案

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

为我工作

另一答案

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

 vertical-align: top !important;

另一答案

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

无论如何...

.fb-like span {
    /* baseline is default, so it negates bottom*/
    vertical-align: baseline !important;
}

......为我做了。

另一答案

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

“顶部”也行。

这是我对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;
}

另一答案

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

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

另一答案

在此处使用此代码使其工作，请参阅垂直对齐部分。相应地更改数字（当前为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>

另一答案

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

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

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

另一答案

我通过添加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黑客，以便按钮并排显示

另一答案

我只是将所有图标都包含在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;
}

另一答案

我通过将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>

不完美的解决方案，但它的工作原理。

另一答案

到目前为止，至少在今天，问题来自<span>标签的奇怪对齐，javascript在.fb-share-button <div>中生成。这是我的修复：

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

另一答案

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

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

另一答案

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

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

EIDT：如果你想让它们居中，只需将它们包裹在一个div中（它们已经被包裹，给它一个类或一个ID。例如，让我们为twitter / facebook提供一类twfb。现在在CSS我们将​​声明宽度和自动边距如下：

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

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

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

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

应该这样做！

祝好运

另一答案

这对我来说很有魅力：

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

另一答案

我无法告诉你在那里发生了什么，我甚至不想考虑< fb:headache >在那里做什么，但你应该能够通过浮动iframe为左边的twitter按钮并添加一些margin-right来解决这个问题得到原始的回顾。

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

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

UPDATE

.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;
}