Q:

Баг в firefox с inline-block ссылками

Есть меню с inline-block ссылками, для которых выставлен line-height. в firefox все отображается корректно, кроме последнего элемента, который уходит вниз. Из-за чего такое происходит и как это исправить.
<div class="header-middle">
                <div class="logo">
                    <a class="logo-inner" href="#">LOGO</a>
                </div>
                <form action="" id="header-search-form">
                        <input type="text" placeholder="Что ищем?">
                        <input type="submit" value="ПОИСК">
                </form>
                <a href="#" class="header-middle-link">Собрать набор</a>
                <a href="#" class="header-middle-link">Все наборы</a>
                <a href="#" class="header-cart">Ваша Корзина</a>
            </div>

Ссылка на демо: http://jsfiddle.net/mzj9hmgw/2/

A:

У .header-cart есть псевдоэлемент :after с высотой в 80 пикселей. Благодаря тому, что он также является строчным элементом (display: inline-block), бейслайн (линия, по которой равняется нижняя граница строки для строчных элементов) находится на расстоянии 80 пикселей от верха элемента, где, по вашей задумке, уже должна быть нижняя граница. Почему наблюдается только в ФФ - лень выяснять, но вам нужно всего лишь решить проблему с :after.

