Отчего разница в 1px между Chrome и Firefox? Как это обыграть?

Question

[sergey]

Открываю в Chrome меню при hover выглядит правильно


без выступа, все ок

но если открыть в Firefox то снизу появляется отступ


Вот эти параметры и отвечают за появление или исчезновение выступа в пол пикселя, если ими поиграться, то вариант таков, что hover будет недоставать до края на те же пол-пикселя, короче засада для перфекциониста. Помогите разобраться.

.nav {
  z-index: 50;
  background-color: $stack-color;
  height: 56px;
}
.nav__link {
    display: block;
    background-color: $stack-color;
    transition: all 0.3s;
    padding: 17px 12px;
    text-decoration: none;

    &:hover{
      background-color: $accent-color;
      transition: all 0.3s;
      text-decoration: none;
}
}

ну или здесь можно посмотреть

Answer 1

[metaf]

Скорее всего проблема в разнице line-height шрифта. У вас захардкожена высота nav, из-за нее и вылезает полупиксель. Уберите эту высоту, а justify делайте через table-cell (вам же не нужно поддерживать ie7 и ниже?).

Comments

[sergey]

justify это такой здесь хак, для разтяжки меню во всю ширину блока

[metaf]

SM: ну то же самое можно сделать через display: table; width: 100%; для ul и display: table-cell для li. Просто с псевдоэлементом и text-align: justify; выравнивание это ооочень древний хак.

[metaf]

SM: а именно он ломает вашу высоту * :)

[sergey]

metaf: благодарствую, действительно также работает