Неправильная настройка кнопок Facebook и Twitter

Ответ 1

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

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

Этот стиль CSS

.fb_iframe_widget iframe

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

vertical-align: text-bottom;

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

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

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

Ответ 2

Я исправил это, добавив 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: встроенный взлом IE7, чтобы кнопки отображались бок о бок

Ответ 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;
}

Ответ 4

Я исправил это, добавив position: relative; top: 4px; к атрибуту style в facebook iframe.

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

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

Неправильное решение, но оно работает.

Ответ 5

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

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

Ответ 6

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

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

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

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

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

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

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

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

Удачи.

Ответ 7

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

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

Ответ 8

Это работало для меня как прелесть:

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

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

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

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

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

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

Ответ 13

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

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

Ответ 14

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

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

Ответ 15

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

Ответ 16

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

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

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

Ответ 17

Twitter и кнопка facebook можно зафиксировать по вертикали.

 vertical-align: top !important;