Firefox 中的负边距值问题

Posted 2023-03-06

【中文标题】Firefox 中的负边距值问题

【英文标题】：Issue with negative margin value in Firefox

【发布时间】：2014-02-23 15:26:56

【问题描述】：

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

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

【问题讨论】：

我发现它在 FF 上的位置更好：absolute

【参考方案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 的解决方案。

【讨论】：

其实，float 不仅仅是选项属性，它可能会破坏布局！

是的，但在我的情况下它工作得很好，而上面的解决方案却没有。我只是为可能偶然发现此问题的人提供另一种选择。 ?

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

这个答案应该被标记为正确，float: left and width: 100% works like a charm

【参考方案3】：

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

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

【参考方案4】：

请使用 top 属性而不是 ma​​rgin-top 并指定 position relative

我的例子：

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