Страница содержит две кнопки, из твиттера и из facebook.
Что я наблюдаю в Firefox 3.5.15:
Может кто-нибудь объяснить, что происходит и как это исправить?
Найден стиль, который толкает его вниз.
Если вы используете FireBug и прокрутите вниз до iframe внутри кнопки FB.
Этот стиль CSS
.fb_iframe_widget iframe
имеет этот элемент
vertical-align: text-bottom;
Это тот, кто его отталкивает.
Вы можете переопределить стиль CSS с помощью следующей комбинации селектора и! important
.twitter-share-button[style] { vertical-align: text-bottom !important; }
Я исправил это, добавив 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, чтобы кнопки отображались бок о бок
Я просто приложил все свои значки в 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;
}
Я исправил это, добавив position: relative; top: 4px; к атрибуту style в facebook iframe.
Итак, это выглядит так:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&layout=box_count&show_faces=true&width=110&action=recommend&colorscheme=light&height=65" scrolling="no" frameborder="0" style="position: relative; top: 4px; border:none; overflow:hidden; width:110px; height:65px;" allowTransparency="true"></iframe>
Неправильное решение, но оно работает.
Кажется, что по крайней мере на сегодняшний день проблема возникает из-за нечетного выравнивания тега <span>, который javascript генерирует в .fb-share-button <div>. Вот мое исправление:
.fb-share-button span {
top: -6px;
}
Вы можете легко решить эту проблему с помощью 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; }
Это должно выровнять их хорошо и близко друг к другу.
Это должно сделать это!
Удачи.
Я понимаю, что эти вопросы были опубликованы некоторое время назад, но вот решение, которое я использую.
.twitter-share-button {
position:relative;
top:6px;
}
Это работало для меня как прелесть:
.twitter-share-button[style] { vertical-align: middle !important; }
Я не могу рассказать вам, что происходит там, и я даже не хочу думать о том, что делает < 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;
}
Проблема здесь не в позиции, высоте или каком-либо другом 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;
}
.fb_iframe_widget {
span {
vertical-align: initial !important;
}
}
работал у меня
Я знаю, что было много ответов, но поскольку я боролся с этим, и никто из них не работал у меня, я думал, что добавлю свои 2 цента... Как уже упоминалось, span имеет vertical-align: bottom; и вам нужно переопределить это. Должен сказать, хотя это противоречит теории CSS, было бы неплохо, если бы вы могли просто "отключить" правило CSS, подобное этому. Я имею в виду, какого черта FB? Иконы работают один день; но не следующий. Это самая глупая вещь, о которой я когда-либо слышал.
В любом случае...
.fb-like span {
/* baseline is default, so it negates bottom*/
vertical-align: baseline !important;
}
... сделал это для меня.
Затем вернемся к первому решению здесь немного.
"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;
}
Я решил это, взяв Guðmundur Þór Magnússon ответ и добавив margin-bottom: -2px !important; в правило CSS:
.twitter-share-button[style] {
vertical-align: text-bottom !important;
margin-bottom: -2px !important;
}
Используйте этот код здесь, чтобы заставить его работать, обратитесь к части с вертикальным выравниванием. Измените номер соответственно (Ток 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>
Все, что я сделал, это добавить CSS на мою страницу:
div.fb_iframe_widget > span {
vertical-align: unset !important;
}
Это немного менее самоуверенный, чем некоторые из ответов здесь, и изолирует изменение, только отменив настройку высоты на значке общего доступа Facebook.
Twitter и кнопка facebook можно зафиксировать по вертикали.
vertical-align: top !important;