CSS3 Преобразование FireFox / Chrome против 11

У меня небольшая проблема с компоновкой css

Поэтому я хочу выровнять некоторые divs inline и перемещать их как 3 пикселя вверх (чтобы сделать вид идеальным)

Он отлично работает в IE10/11, но не в FireFox и Chrome.

Я не могу дать вам ссылку, но я могу вставить некоторые экраны

Так вот что я хочу (работая над IE10/11)

http://beehiver.jurion.me/ie11.png

И теперь FireFox:

http://beehiver.jurion.me/firefox.png Вот мой CSS для этой части:

#buttons {
    display: inline-block;
    color: #526271;
}

    #buttons a {
        color: #526271;
        transition: all 250ms ease-out;
    }


        #buttons a:hover {
            color: #1ab9d6;
        }

    #buttons div {
        display: inline-block;
        width: 100px;
        height: 53px;
        border-left: 1px solid grey;
        vertical-align: top;
        transform: translate(0px,-2px);
        padding-left: 3px;
        text-align: center;
        transition: all 250ms ease-out;
        border-bottom: 2px solid transparent;
    }

        #buttons div:hover {
            border-left-color: #1ab9d6;
            border-bottom-color: #1ab9d6;
        }

        #buttons div i {
            font-size: 34px;
            vertical-align: top;
            transform: translate(0px,10px);
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

Я просто не могу понять, почему он не работает :(

РЕДАКТИРОВАТЬ:

Ответа на этот вопрос J McFee:

inline-block чувствителен к пробелам, я рекомендую плавать ваши div.

Работает отлично ! (порождает небольшую проблему, которую я могу решить, не связанный с вопросом)

Изменения:

#buttons div {
    float:left;

а также

<div class="clearfix"></div>