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>

margin-top应用于班级.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将文本居中放置在容器内部，该文本应自动将文本垂直和水平放置在其容器内。