Смещение кнопок Facebook и Twitter

Question

Страница содержит две кнопки, из твиттера и из фейсбука.

В Firefox 3.5.15 я наблюдаю:

1. Во время загрузки страницы кнопки более или менее выровнены (я имею в виду их нижние стороны)
2. Когда страница загружена, кнопка facebook перемещается на несколько пикселей вниз, поэтому ее нижняя сторона ниже нижней части кнопки Twitter.
3. Если я перезагрузю страницу, кнопки снова выровняются и останутся в этом состоянии даже после загрузки страницы.

Может кто-нибудь объяснить, что происходит и как это исправить?

Answer 1

кнопки Twitter и Facebook могут быть зафиксированы по вертикали

 vertical-align: top !important;

Answer 2

Я не могу сказать вам, что там происходит, и я даже не хочу думать о том, что там делает < fb:headache >, но вы должны быть в состоянии решить эту проблему, разместив iframe для кнопки Twitter слевадобавив немного отступа вправо, чтобы вернуть исходный вид.

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

Это немного хакерски, но стоит сделать.

Answer 3

Я знаю, что было много ответов, но так как я боролся с этим, и ни один из них здесь не работал для меня, я думал, что я добавлю свои 2 цента ... Как уже упоминалось, span имеет vertical-align: bottom;и вам нужно переопределить это.Я должен сказать, что хотя это противоречит теории CSS, было бы неплохо, если бы вы просто «отключили» правило CSS, подобное этому.Я имею в виду, что, черт возьми, FB?Иконы работают один день;но не следующий.Это самая глупая вещь, о которой я когда-либо слышал.

В любом случае ...

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

... сделал это для меня.

Answer 4

Все, что я сделал, это добавил CSS на мою страницу:

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

Это немного менее самоуверенно, чем некоторые из ответов, приведенных здесь, и изолирует изменение от отмены только регулировки высоты на значке общего доступа Facebook.

Answer 5

Я решил это, взяв Guðmundur Magnór Magnússon s answer и добавив margin-bottom: -2px !important; к правилу CSS:

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

Answer 6

Используйте этот код здесь, чтобы заставить его работать, обратитесь к части с вертикальным выравниванием.Измените номер соответственно (текущий 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>

Answer 7

Затем вернемся к первому решению, немного.

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