Отрицательный верхний край в Firefox перемещает элементы вправо

Question

Когда я применяю минус-вершину -3px в родительском элементе, все дочерние элементы перемещаются вправо (в Firefox и IE8), но в Chrome выглядят идеально (элементы центрированы).Что может быть причиной этого?

<div class="menu-tab">
      <div class="folder-tab">
        <span class="normal-small-text">Ingresar<i class="icon-chevron-down icon-white"></i></span>
      </div>
</div>

Верхушка поля применяется в классе .menu-tab

Это в Chrome

И Firefox

Answer 1

Поскольку это, похоже, решило проблему для вас, я напишу это как ответ.

Заменить:

margin-top: -3px;

с:

position: relative;
top: -3px;

Answer 2

Мм, я не вижу никакой причины, почему для использования margin-top для этого элемента, вы можете просто присвоить ему высоту вашего контейнера как line-height, и он должен автоматически центрироваться вместе с text-align:center для центрируйте текст внутри контейнера, который должен автоматически центрировать текст как вертикально, так и горизонтально внутри его контейнера.

Answer 3

Хорошо, попробуйте определить маржу в родительском элементе как 0 .menu-tab {margin:0;}, а затем определить маржу для дочернего элемента в зависимости от ваших потребностей.