在Firefox中使用负边距数值时出现问题

Question

我在Firefox浏览器中使用负边距遇到了问题。负边距在Chrome浏览器中可以正常工作，但在Firefox浏览器中不行。

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

- Al-Mothafar

---

我发现在使用position:absolute时，在FF上效果更好。 - Mark

Answer 1

该解决方案的简单方法：

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

我用相同的值将 margin-top 替换为 top ，然后将 height 减少了旧的 margin-top 值，结果非常好。

- Al-Mothafar

---

但是如果你不知道高度，这可能不是正确的做法。 - Thomas Gak-Deluen

@tgdn 尽量不要考虑高度。在我的情况下，我需要关注高度，如果你没有高度，那么你就不需要处理它，但在某些情况下可能需要进行一些包装。 - Al-Mothafar

如果它对你仍然不起作用，请尝试为当前的div元素添加 display:inline-block; 属性，这样它在Firefox浏览器中才能正常工作，或者您也可以使用 float:left。如果 display: inline-block; 或 float:left 破坏了宽度问题，请再加上 width: 100%;。 - Deepak Yadav

Answer 2

对于仍然遇到相同问题的人，只需在具有负边距的DOM元素中添加float:left。感谢@Deepak Yadav提供的解决方案。

- John Isaiah Carmona

---

实际上，浮点数不仅仅是可选属性，它可能会破坏布局！ - Al-Mothafar

是的，但在我的情况下它完美地工作，而上面的解决方案则不然。我只是为那些可能遇到这个问题的人提供另一个选择。 - John Isaiah Carmona

使用 display: inline-block 也应该可以正常工作，并且可能比 float:left 更适合您的布局。 - Daan

这个答案应该被标记为正确，float: left 和 width: 100% 的效果非常好。 - Wasim Sayyed

Answer 3

我做了这个，而且非常完美地运行。

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

- Jung Rupak Dhiran

Answer 4

请使用 top 属性代替 margin-top 并赋值 position:relative

我的示例：

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

}

- shyvijay