css - facebook と twitter ボタンの css 配置の問題

Question

Facebookのボタンが次のページの上部にある理由がわかりません http://wishd.me/chovy/lists/507f8817a51102a137000001

<div class="social">
    <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-size="medium" data-count="none">Tweet</a>
    <div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>
</div>

フェイスブックのボタンは、ツイッターのボタンより少し下にあります。

Answer 1

domを調べると、twitter iframeの高さが20pxで、fbdivの高さが27pxであることがわかります。

これを処理するいくつかの方法があります。.social.iframeルールもfbiframe4pxを下に移動するため、上記の両方の投稿は好きではありません。もう1つは、私の意見を乱雑にすることです。

できるよ：

.social > iframe { display: inline-block; position: relative; top: 4px; }

すべてのソリューションが最も美しいわけではありません...

Answer 2

.social iframe {
  position: relative;
  top: 4px;
}

Twitteriframeは少し下に移動し、すべてが適切に調整されます。

ps .socialstyle.css 445行目にあるあなたのスタイル。

Answer 3

試す

<div style="float:left ;margin-right:5px;margin-top:4px">
     <iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/tweet_button.1347008535.html#_=1350635993430&amp;count=none&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwishd.me%2Fchovy%2Flists%2F507f8817a51102a137000001&amp;size=m&amp;text=chovy's%20wishlist%20%C2%BB%20Movies%20-%20Wishd.me&amp;url=http%3A%2F%2Fwishd.me%2Fchovy%2Flists%2F507f8817a51102a137000001" class="twitter-share-button twitter-count-none" style="width: 58px; height: 20px;" title="Twitter Tweet Button" data-twttr-rendered="true"></iframe>

</div>

結果