элементы <div>, накладывающиеся друг на друга на мобильном устройстве

Я пытаюсь добавить кнопки совместного доступа для социальных сетей, таких как facebook, twitter и linkedin, на мой сайт, но я получаю некоторые реальные нечетные результаты на моем устройстве Android. То, как я хочу, чтобы кнопки были настроены, бок о бок в одной прямой. В Firefox, Chrome и Internet Explorer все кнопки выравниваются так, как я их хочу. Однако на моем устройстве Android кнопки facebook (которые являются divs) складываются друг над другом и первый тег после них. Я использовал код, предоставленный facebook, twitter и linkedin для создания этих кнопок.

Код выглядит примерно так:

<div id="social_links">
    <div class="fb-like" otherdata></div>
    <div class="fb-share-button" otherdata></div>
    <a class="twitter_share_button" otherdata></a>
    <a class="tiwtter_follow_button" otherdata></a>
    <linkedin button>
    <email button>
</div>

Как я уже сказал, в настольных браузерах все ссылки выходят в горизонтальной линии, как я хочу, но на моем устройстве Android facebook, например, кнопки, расположенные поверх кнопки общего доступа к facebook, и которая складывается поверх кнопки щебета.

Здесь CSS для div, который содержит их все:

#social_links {
    float: right;
    margin-right: 10px;
    display: block;
}

Если я недостаточно хорошо объясню, как я хочу, чтобы все выглядело, вот как я хочу, чтобы они были выложены:

<div> <div> <a> <a> <button> <button>

И вот как они выходят на Android:

<div>
<div>
<a> <a> <button> <button>

Я создал код для своих кнопок с https://developers.facebook.com/docs/plugins/share-button/ и https://developers.facebook.com/docs/plugins/like-button для facebook и https://about.twitter.com/resources/buttons для twitter. Если бы кто-нибудь мог помочь мне понять, почему Android выравнивает вещи таким образом, я был бы очень признателен.