Firefox 中的负边距值问题答案

【问题标题】：Issue with negative margin value in FirefoxFirefox 中的负边距值问题
【发布时间】：2014-02-23 15:26:56
【问题描述】：

我在 Firefox 中遇到了负边距问题。我的负边距在 Chrome 中有效，但在 Firefox 中无效。

.search-bar {
    height: 108px;
    position: relative;
    margin-top: -10px;
}

【问题讨论】：

【解决方案1】：

解决办法很简单：

.search-bar {
    height: 98px;
    position: relative;
    top: -10px;
}

我将margin-top 替换为具有相同值的top，并将height 降低为旧的margin-top 值，并且工作起来就像一个魅力。

【讨论】：

但是如果你不知道高度，这可能不是正确的方法
@tgdn 尝试忽略高度。在我的情况下，我需要注意身高，如果你没有身高，那么你不必对它做任何事情，但在某些情况下你可能需要做一些包装。
如果它仍然不适合你。尝试赋予当前 div display:inline-block; 属性，然后它可以在 Firefox 中使用，或者您也可以使用 float:left。如果display: inline-block; 或float:left 破坏了您的宽度问题，请再给它一个width: 100%;。

【解决方案2】：

对于仍然有同样问题的每个人，只需将float:left 添加到具有负边距的 DOM 元素。感谢@Deepak Yadav 的解决方案。

【讨论】：

【解决方案3】：

我做了这个，效果非常好。

.your__class{
    display:inline-block;
    vertical-align:top;
    margin-top:-100px;
}

【讨论】：

【解决方案4】：

请使用 top 属性而不是 margin-top 并指定 position relative

我的例子：

div span {
    display: inline-block;
    top: -10px;
    width: 100%;
    height: 3px;
    line-height: 40px;
    position: relative;

}

【讨论】：