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

那么，請嘗試將父元素中的邊距定義為0 .menu-tab {margin:0;}然后根據需要為子元素定義邊距。

Answer 3

嗯，我看不出在該元素上使用margin-top任何原因，您可以輕松地將其高度設置為容器的高度（以line-height並且它應該自動居中，以及text-align:center to center容器內的文本，它將自動在容器內垂直和水平居中放置文本。