Facebook和Twitterbutton错位
该页面包含两个button，从Twitter和Facebook。
我在Firefox 3.5.15中观察到的是：
- 当页面加载时，button或多或lessalignment（我的意思是它们的底部）
- 当页面被加载时，facebookbutton向下移动几个像素，所以它的底部低于twitterbutton的底部。
- 如果我重新加载页面，这些button再次alignment，并且即使在加载页面之后仍然保持这种状态。
有人可以请解释发生了什么事以及如何解决？
find了推动它的风格..
如果您使用FireBug并向下滚动到FBbutton内的iframe。
这个CSS样式
.fb_iframe_widget iframe 有这个元素
vertical-align: text-bottom;
那是推倒重来的人
你可以用下面的select器和！重要的组合来覆盖CSS样式
.twitter-share-button[style] { vertical-align: text-bottom !important; }
我通过添加vertical-align：top（这是使用他们新的HTML5标记）来解决这个问题。 我的Facebookbutton代码现在看起来像：
<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>
我还必须添加zoom：1和* display：内嵌IE7 hack，以便button并排显示
我只是把所有的图标都放在一个div中，然后在这个div上设置行高，这样它们全部排成一列（因为它们都是一样的高度，有些与顶部和底部alignment）
<div class="product-social-links"> <a href="//www.pinterest.com/pin/create/but [...] > <img src="//assets.pinterest.comhttp://img.dovov.compidgets/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;解决这个问题position: relative; top: 4px; position: relative; top: 4px; 到Facebook的iframe的style属性。
所以，看起来像这样：
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&layout=box_count&show_faces=true&width=110&action=recommend&colorscheme=light&height=65" scrolling="no" frameborder="0" style="position: relative; top: 4px; border:none; overflow:hidden; width:110px; height:65px;" allowTransparency="true"></iframe>
一个不完美的解决scheme，但它的工作。
至less现在看来，这个问题来自javascript在.fb-share-button <div>生成的<span>标记的奇怪alignment。 这是我的修复：
.fb-share-button span { top: -6px; }
你可以用CSS轻松解决这个问题：
iframe { float: left; padding-right: 10px; }
EIDT：如果你想让它们居中，只需把它们包装在一个div中（它们已经被包装了，给这个div一个类或者一个ID），例如，我们给它一个twitter / facebook的twfb类。我们将CSS声明一个宽度和自动边距，如下所示：
.twfb { width: 120px; margin: 0 auto; }
编辑2：要从Facebook删除大幅度，只需将其添加到您的CSS：
.fb_edge_widget_with_comment { margin-left: -26ppx; }
这应该让他们很好，彼此接近。
这应该做到这一点！
祝你好运
我意识到这个问题是前段时间发布的，但这里是我使用的解决scheme。
.twitter-share-button { position:relative; top:6px; }
我不能告诉你那里发生了什么事情，我甚至不想考虑那里有什么< fb:headache > ，但是你应该能够通过浮动左边的twitterbutton的iframe来解决这个问题，并添加一些保证金的权利，以获得原来的回头看。
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; }
这里的问题不是位置，高度或任何其他CSS，而是内联块元素采取错误的垂直alignment。 facebook元素是vertial-align：top，twitter元素是vertical-align：bottom。 可以只用一行CSS来修复，但必须使用正确的select器和！important重写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-share-button[style] { vertical-align: middle !important; }
我知道已经有很多答案了，但是因为我为此苦苦挣扎，没有人在这里为我工作，所以我想我会增加我的2美分……正如已经提到的， span有一个vertical-align: bottom; 你需要重写这个 我必须说，即使它与CSS理论背道而驰，如果你只是简单地“closures”一个像这样的CSS规则，真的会很好。 我的意思是，FB到底是什么？ 有一天工作的图标; 但不是下一个。 这是我听过的最愚蠢的事情。
无论如何…
.fb-like span { /* baseline is default, so it negates bottom*/ vertical-align: baseline !important; }
…为我做了。
然后回到这里的第一个解决scheme。
“顶”也可以。
这是我对joomla插件的解决scheme（请参阅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ÞóMagnússon的答案解决了这个问题，并增加了margin-bottom: -2px !important; 到CSS规则：
.twitter-share-button[style] { vertical-align: text-bottom !important; margin-bottom: -2px !important; }
在这里使用这个代码来使它工作，参考垂直alignment的部分。 相应地更改号码（当前是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>
