web-dev-qa-db-ja.com

FacebookとTwitterのボタンのずれ

このページには、TwitterとFacebookの2つのボタンが含まれています。

Firefox 3.5.15で私が観察しているのは：

  1. ページがロードされている間、ボタンは多少整列されます（つまり、下側を意味します）
  2. ページがロードされると、facebookボタンが数ピクセル下に移動し、下側がTwitterボタンの下側よりも低くなります。
  3. ページをリロードすると、ボタンは再び配置され、ページがロードされた後もこの状態のままになります。

誰かが何が起こっているのか、それを修正する方法を説明してください

htmlcssfacebooktwitter
44
Roman Cheplyaka

それを押し下げているスタイルを見つけた..

FireBugを使用して、FBボタン内でiframeまでスクロールダウンする場合。

このCSSスタイル

.fb_iframe_widget iframe

この要素を持っています

vertical-align: text-bottom;

それはそれを押し下げている人です。

次のセレクターと！importantのコンボでCSSスタイルをオーバーライドできます

.Twitter-share-button[style] { vertical-align: text-bottom !important; }
51
Guðmundur Þór Magnússon

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>

また、zoom：1と* display：inline IE7 hackを追加して、ボタンが並んで表示されるようにしました

52
vandre

すべてのアイコンを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;
}
46
Dan dot net

Facebook iframeのstyle属性にposition: relative; top: 4px;を追加することでこれを修正しました。

したがって、次のようになります。

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

不完全なソリューションですが、動作します。

8
Gezim

少なくとも今日の時点で、問題は<span>内でjavascriptが生成する.fb-share-button <div>タグの奇妙な配置に起因するようです。これが私の修正です：

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

この質問は少し前に投稿されたことに気付きましたが、ここで私が使用しているソリューションを紹介します。

.Twitter-share-button {
      position:relative;
      top:6px;
      }
3
Digital Robot Gorilla

この問題はCSSで簡単に解決できます。

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

EIDT：それらを中央に配置したい場合は、単純にdivにラップします（既にラップされている場合、そのdivにクラスまたはIDを指定します。たとえば、Twitterにtwfbのクラスを指定します/ facebook。CSSで、幅と自動マージンを次のように宣言します。

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

編集2：Facebookから大きなマージンを削除するには、これをCSSに追加するだけです：

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

それはそれらをナイスで互いに近くに揃えるはずです。

これでうまくいくはずです！

幸運を

2
Amit

これは私にとって魅力的でした：

.Twitter-share-button[style] { vertical-align: middle !important; }
2
andres.arslanian

ここでの問題は、位置、高さ、またはその他のCSSではなく、インラインブロック要素が誤って垂直方向に整列することです。 facebook要素はvertial-align：topで、Twitter要素はvertical-align：bottomです。 CSSの1行だけですべてを修正できますが、正しいセレクターと！importantoverride JSを適用したインラインスタイルを使用する必要があります。

iframe[style] { /* to select the outer-most element of the Twitter button */
    display: inline-block;
    vertical-align: bottom !important;
}
1
DMTintner
.fb_iframe_widget {
  span {
   vertical-align: initial !important;
  }
}

私のために働いた

1
Raymond Ma

TwitterとFacebookのボタンは垂直方向に揃えて固定できます

 vertical-align: top !important;
1
Pan Bouradas

私はそこで何が起こっているのかを伝えることはできませんし、< fb:headache >がありますが、Twitterボタンのiframeを左にフローティングし、右にマージンを追加して元の外観に戻すことで、この問題を解決できるはずです。

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

それは少しハックですが、そうすべきです。

[〜＃〜] 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;
}
1
polarblau

GuðmundurÞórMagnússon の answer を取り、margin-bottom: -2px !important; CSSルール：

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

次に、最初の解決策に戻ります。

「トップ」も大丈夫です。

これは、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;
}
0
Klas Wirholm

私がしたことは、ページにCSSを追加することだけでした。

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

これは、ここでの回答のいくつかよりも少し意見が少なく、Facebook共有アイコンの高さ調整のみを元に戻すという変更を切り分けています。

0
digitalfoo

ここでこのコードを使用して機能させます。垂直整列部分を参照してください。それに応じて番号を変更します（現在は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>
0
Benjamin Alexander Cai