"Like"ボタンの4ピクセルオフセット

Question

私のサイトにあるソーシャルメディアのボタンはすべて整列したいと思います。 LinkedIn、GoogleOne、Twitterのボタンはすべて縦に並んでいますが、なぜFaceBookの「好き」ボタンが4ピクセル下にジャンプするのかわかりません。

マージントップ、垂直アライメントCSSなどを調整しようとしましたが、このボタンを元に戻すことはできません。

Answer 1

私は同じ問題がありました。ここにfbのようなボタンコードがあります：

<div id="fb-root"></div> 
<script>(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 

<div class="fb-like" data-href="mysite.com" data-send="false" data-layout="button_count" data-width="30" data-show-faces="false" data-font="arial"></div> 

私が思いつくことができる唯一の解決策は、ボタンを数ピクセル手動でオフセットすることです。私はdivの中に上記のブロックを同封し、いくつかのピクセルを、それを押し上げ：

.shareable { 
    height: 20px; 
    display: inline-block; 
} 

.shareable .fb-like { 
    top:-3px; 
} 

Answer 2

私はこれを使ってきたし、他のブラウザのプレゼンテーションに害を一貫して動作するようです：

.fb-like { line-height: 0; }