Facebook和Twitter按钮的未对齐

问题描述：

该页面包含两个按钮，分别来自twitter和facebook。Facebook和Twitter按钮的未对齐

我正在观察在Firefox 3.5.15是：

当加载页面时，按钮都或多或少对齐（我的意思是他们的下侧）
当页面加载，facebook按钮向下移动几个像素，所以它的底部低于twitter按钮的底部。
如果我重新加载页面，这些按钮再次对齐，并且即使在页面加载后仍保持此状态。

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

答

被发现时其向下推的风格..

如果你使用Firebug和向下滚动到FB按钮中的iframe。

这个CSS样式

.fb_iframe_widget iframe

有这个元素

vertical-align: text-bottom;

这是谁在推下来的一个。

您可以选择下列组合和！重要

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

答

我不能告诉你那里发生了什么事，我甚至不想去想那里有什么<fb:headache>，但是你应该能够通过浮动iframe左侧的twitter按钮并添加一些保证金 - 让原来的回头看。

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

感谢您的回答。我希望这些按钮位于`div`的中心 - 您的解决方案是否可以适应此？ – 2011-01-22 23:02:50

嗯，我想你必须有另一个div包装按钮，只是足够宽，以适应他们两个，然后使用`边距：0汽车`中心这个div在它的父div。 – polarblau 2011-01-22 23:14:04

谢谢。这是我玩过浮动后得到的结果： http://ro-che.info/ccc/11.html。仍然不完全是我想要的（按钮似乎是由它们的上部而不是下部对齐），但是更麻烦我的是facebook按钮之前的大空间。我如何摆脱它？另外，请你解释一下（或者指出我的解释）为什么浮动在这里有帮助吗？ – 2011-01-23 15:53:20

答

您可以轻松地解决这个问题，与CSS：

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

EIDT：如果你希望他们为中心，简单地将它们包装在一个div（其他们已经包装了，给这个div一个类或一个ID。例如，让我们给它一类twfb twitter/facebook。现在在CSS中，我们将声明一个宽度和自动边距像这样：

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

编辑2：若要从Facebook上删除大截，只需将它添加到您的CSS：

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

这应该对准他们不错，彼此靠近。

这应该做到这一点！

好运

你可以通过添加它的类来更具体的iframe，但我希望你没有那么多的iframe ... – Amit 2011-01-22 22:49:41

感谢您的答案。我希望这些按钮位于`div`的中心 - 您的解决方案是否可以适应此？ – 2011-01-22 23:03:20

当然！我现在编辑我的答案 – Amit 2011-01-23 00:24:33

答

我加入position: relative; top: 4px; facebook的iframe的style属性修复了这个覆盖CSS样式。

所以，它看起来像这样：

<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>

一个不完善的解决方案，但它的工作原理。

答

我通过添加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破解，使按钮显示并排

答

我知道这问题被张贴一段时间以前，但这里是我使用的解决方案。

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

答

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

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

答

看来，今天至少，这个问题来自于JavaScript的产生.fb-share-button <div>内<span>标签的奇对齐。这里是我的解决办法：

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

答

我知道已经有很多答案，但因为我这个挣扎，没有在这里工作对我来说，我想我会加入我的2美分...正如已经提到的， span有一个vertical-align: bottom;，你需要重写这个。我必须说，即使它与CSS理论背道而驰，如果你能简单地“关闭”一个像这样的CSS规则，那真的会很好。我的意思是，FB到底是什么？一天工作的图标;但不是下一个。这是我听过的最愚蠢的事情。

反正...

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

...为我做。

答

我只是围绕着我的所有图标在一个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; 
}

答

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

“top”也可以。

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

答

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

工作对我来说

答

这个工作对我来说是一个魅力：

.twitter-share-button[style] { vertical-align: middle !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共享图标上的高度调整。

答

Twitter和Facebook按钮可以垂直固定对准

vertical-align: top !important;

Facebook和Twitter按钮的未对齐

相关推荐