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

Question

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

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

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

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

Answer 1

Я исправил это, добавив вертикальное выравнивание: верх (это при использовании их новой разметки HTML5). Мой код кнопки в фейсбуке теперь выглядит так:

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

Мне также пришлось добавить зум: 1 и * дисплей: встроенный взлом IE7, чтобы кнопки отображались рядом

Answer 2

Нашел стиль, который толкает его вниз.

Если вы используете FireBug и прокрутите вниз до iframe внутри кнопки FB.

Этот стиль CSS

.fb_iframe_widget iframe

имеет этот элемент

vertical-align: text-bottom;

Это тот, кто толкает его вниз.

Вы можете переопределить стиль CSS с помощью следующей комбинации селектора и! Важное

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

Answer 3

Я просто вложил все свои значки в элемент 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;
}

Answer 4

Я исправил это, добавив position: relative; top: 4px; к атрибуту style в фрейме Facebook.

Итак, это выглядит так:

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

Несовершенное решение, но оно работает.

Answer 5

Похоже, что по крайней мере на сегодняшний день проблема заключается в нечетном выравнивании тега <span>, которое генерирует javascript в пределах .fb-share-button <div>.Вот мое исправление:

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

Answer 6

Я понимаю, что эти вопросы были опубликованы некоторое время назад, но вот решение, которое я использую.

.twitter-share-button {
      position:relative;
      top:6px;
      }

Answer 7

Это сработало для меня как заклинание:

.twitter-share-button[style] { vertical-align: middle !important; }

Answer 8

Вы можете легко решить эту проблему с помощью CSS:

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

EIDT: если вы хотите, чтобы они были отцентрированы, просто оберните их в div (который они уже обернуты, дайте этому div класс или ID. Например, давайте дадим ему класс twfb для твиттера / фейсбука. Теперь в CSS мы объявим ширину и автоматические поля следующим образом:

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

РЕДАКТИРОВАТЬ 2: Чтобы удалить большое поле из Facebook, просто добавьте это в свой CSS:

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

Это должно выровнять их красиво и близко кдруг друга.

Это должно сделать это!

Удачи

Answer 9

Проблема здесь не в позиции, высоте или любом другом CSS, а в элементах inline-block, принимающих неправильное вертикальное выравнивание. Элемент facebook имеет вертикальное выравнивание: верх, а элемент Twitter - вертикальное выравнивание: нижнее. Все можно исправить только одной строкой CSS, но нужно использовать правильный селектор и! Importantoverride JS примененные встроенные стили.

iframe[style] { /* to select the outer-most element of the twitter button */
    display: inline-block;
    vertical-align: bottom !important;
} 

Answer 10

.fb_iframe_widget {
  span {
   vertical-align: initial !important;
  }
}

работал на меня