Кнопка Facebook Like не совпадает с другими социальными кнопками. Используется CSS, чтобы исправить это, но ломается в других браузерах

CSS

.share {
    width: 150px;
    height: 20px;
    background: #000;
    float: right;
    white-space: nowrap;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 3px;
    background-color:rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: 5px;
    box-shadow: 0px 0px 10px #888;
    vertical-align: top;
}

HTML:

<div class="share">
    <div class="fb-like" data-href="#" onclick="location.href='http://bronies.info/'; return false;" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" style="width:47px; overflow:hidden; top:-3px; left:3px;"></div>
    <a href="#" onclick="location.href='https://twitter.com/share'; return false;" class="twitter-share-button" data-text="Wondered what the bronies were all about?" data-count="none">Tweet</a>
    <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300" style="width:32px; overflow:hidden;"></div>
</div>

Chrome, Safari:

Internet Explorer, Firefox и Opera:

Если вы видите, что я сделал в свойстве HTML style, я использовал top:-3px, и я сделал это, прежде чем тестировать мой сайт в других браузерах (Chrome - мой основной веб-браузер). Я использовал top, потому что быстрый поиск в Google привел меня к странице, в которой мне было предложено сделать это. Теперь, когда это решение не работает, как бы настроить его для выравнивания и во всех веб-браузерах?

Ответы

Ответ 1

Вы должны полностью удалить top:-3px;. Поскольку у вас нет position:relative;, который требуется (что-то отличное от static), чтобы активировать позиционирование, Webkit (Chrome, Safari) правильно игнорирует его, но Internet Explorer, Firefox и Opera ошибочно соблюдают его ( -3px shift).

EDIT:

Из комментариев...
Facebook script добавляет <span> внутри вашего <div>, который затем запускает правило CSS, которое они также предоставляют: .fb_iframe_widget span { vertical-align: text-bottom; }. Я предлагаю добавить float: left; ко всем трем вашим тегам <div>, чтобы они не делили общий поток (или базовый уровень).

Ответ 2

Мое решение:

.fb-like.fb_iframe_widget span{
  vertical-align: top !important;
}

Ответ 3

попробуйте использовать top: auto и посмотрите на результат, проверьте и посмотрите, находится ли он в одной позиции во всех браузерах. Если его нужно выровнять практически, используйте bottom: 3px; (или любое подходящее значение, которое соответствует вашим потребностям)

не забывайте, что вы должны позиционировать: relative; к вашему коду

поэтому окончательный стиль для кнопки facebook должен выглядеть примерно так:

width:47px; overflow:hidden;position:relative; top:auto;  bottom:3px; left:3px;

Ответ 4

Я предлагаю использовать display: inline-block; и vertical-align: middle; для контейнера кнопки Facebook...

Ответ 5

Я добавил vertical-align: text-bottom; в <span>, включающий каждую кнопку (чтобы соответствовать тому, что делает Facebook), и все прекрасно сочетается в Chrome, Firefox и IE. (Мои интервалы также имеют display: inline-block, если это имеет значение.)

Ответ 6

Попробуйте добавить это в свой "share" div. Я не знаю, как это выглядит в других браузерах, но похоже, что они выстраиваются в Chrome.

font-size: 0.1px;

Ответ 7

В итоге я обернул каждую кнопку в свой div и установил div на

display:inline-block; white-space: nowrap; vertical-align:top;

а затем добавили следующее в специальный div для facebook:

#facebookButton > div > span {vertical-align:baseline;}

Ответ 8

Добавление следующего стиля в мой css выравнивает кнопку общего доступа к facebook с другими социальными значками.

 .fb_iframe_widget{vertical-align:top;}

Ответ 9

Это мое решение: оберните каждую социальную кнопку элементом inline-block. И каждая социальная кнопка имеет атрибут display block

HTML

<div class="social-share clearfix">
    <div class="social-share-item">
        <div id="fb-like" class="fb-like" data-href="{url}" data-layout="button_count" data-size="small" data-action="like" data-show-faces="true" data-share="true"></div>
    </div>
    <div class="social-share-item">
        <a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>
    </div>
    <div class="social-share-item">
        <div class="g-plus" data-action="share"></div>
    </div>
</div>

CSS

.social-share {
    display: block;
    background: #f9f9f9;
    padding: 0.2em 0.4em;
    margin-top: 1em;
}
.social-share-item > * {
    display: block;
    float: left;
}
.social-share-item {
    display: inline-block;
}

Ответ 10

У меня была такая же проблема с мобильными браузерами, и я решил ее:

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