Question

我偶然发现Safari和Chrome / Firefox之间的布局渲染存在差异，我不知道哪一个是“正确的”。

您可以查看jsfiddle here

在Firefox / Chrome上，布局符合预期，黄色div在之后正确。但是在Safari上，黄色div位于下红色。

在调查我做错了什么后，我发现错误来自CSS类E，其属性margin-right（值：-11px）大于width属性（值： 10px）为我的div。

我想我明白为什么Safari以这种方式呈现它。类B的div宽度计算为子项宽度的总和，因为它们具有属性float: left;。

此处为widthB = widthB2*2 + widthE + marginRightE + widthC或marginRightE < -widthE，因此widthB不足以将每个div包含在彼此旁边。

所以我的问题是：

我是否理解Safari的功能？

为什么Chrome和Firefox的呈现方式不同？他们是不是根据负margin-right？
减少父div的宽度
在这种情况下，正确的修正是否始终具有margin-right小于或等于div的宽度？

谢谢！

HTML：

<div class="A"> <div class="C"> <div class="B"> <div class="B2"></div> <div class="B2"></div> <div class="E"></div> <div class="C"> <div class="D"></div> </div> </div> </div> </div>

CSS：

.A { background-color: blue; height: 200px; } .B { height:100px; } .B2 { background-color: red; height: 100px; width: 100px; float: left; } .C { float: left; } .D { height: 40px; width: 40px; float:left; background-color: yellow; } .E { height: 50px; width: 10px; position: relative; left: -10px; margin-right: -11px; background-color: black; float: left; }

Answer 1

我不确定你对JS小提琴中的CSS有什么期望。您正在钻研未定义的行为。我这样说是因为：

'C'浮动，但没有定义的宽度。这会导致各种浏览器出现问题，具体取决于布局的复杂程度。
没有任何浮动元素被清除。浮动时，必须使用某些描述的明确修复，无论是clear:both等。

如果您调整标记并添加明确修复，则会看到内容始终为239px。见http://jsfiddle.net/eaFn9/

然而，似乎相对定位的项目'E'和边距对宽度计算产生负面影响，因为Chrome的网络检查员似乎总是奇怪地报告此元素的负边距

如果你在网络检查器中玩这个，你可以看到它几乎就像负边距是跌落的原因。我认为这可能是由于容器没有宽度，并且本身不是相对位置。

如何解决？

就个人而言，我想重新编写你的布局，在所有浮动上包含固定宽度，减少浮动嵌套并尽可能清除。它似乎过于复杂，但没有真实世界的用例，很难重写。

然而，在我看来，你可以将'B2'+'E'元素包装在一个浮动且相对定位的包装中，然后在'E'上使用绝对定位来产生相同的效果并消除负边距。

这是我提出的JSFiddle：http://jsfiddle.net/jV3Ub/

Answer 2

对不起，这不是一个真正的答案，但要发表评论太久了...... 无论如何，我花了一分钟才弄明白这一点。

我在Mac OS X 10.8.2，Chrome 24.0（Mac）和Safari 6.0.2（Mac也使用）上使用了Firefox 19。使用Web检查器工具，我意识到div的确没有以相同的方式计算。我在计算时很糟糕，但是我花了很多时间坐下来仔细看看这个，我确实理解Safari的计算方法。

在Safari中，似乎div B的宽度不足以包含黄色div（C），所以它似乎拒绝它到底部。为了记录，在我的测试中，我在FF和Chrome中看到红色div右侧的黄色div，而Safari在红色下方和左上方显示它。我不确定这会有所帮助，但我只建议您使用现在集成到所有现代浏览器的Web检查工具来调试它。

我不确定为什么会发生这种情况，我所知道的只是将E的宽度改为1px，就像这样：

.E {
  height: 50px;
  width: 11px; /* added 1px to this property */
  position: relative;
  left: -10px;
  margin-right: -11px;
  background-color: black;
  float: left;
}

它在Safari中正确显示。

Answer 3

对班级.D和.E进行以下更改：

.D {
  float:left;
  height: 40px;
  width: 40px;
  background-color: yellow;
  margin-left: -11px;
}
.E{
  height: 50px;
  width: 10px;
  position: relative;
  left: -10px;
  background-color: black;
  float: left;
}

DEMO：http://jsfiddle.net/uryJJ/22/

我希望这有帮助！

Answer 4

第二次编辑：

我认为我们应该将这两个问题与https://stackoverflow.com/questions/4989930/css-negative-margin和why use negative margins?联系起来。

另请参阅W3C保证金规范：http://www.w3.org/TR/CSS2/box.html#margin-properties。 8.3.1节可能会解释您的样品发生了什么。在Safari中无法正确呈现折叠边距问题。

原始帖子：

所以我的问题是：

1）我对Safari的理解是正确的。为什么Chrome和Firefox渲染方式不同？听起来可能就是这样，但是，真的，谁在乎呢？你没有得到你想要的结果。您应该更改代码，除非您不关心Safari用户。

2）他们是不是根据负边际权利减少父div的宽度？可能，但又一次，并不重要。

3）在这种情况下，正确的校正是否总是有一个小于或等于div宽度的边距？我会说是的。要解决问题并获得您想要的结果，我将使用类B2在最右边的div内移动div。然后向右浮动E并移除位置，左侧和右侧属性。

.E {
height: 50px;
width: 10px;
background-color: black;
float: right;
}

http://jsfiddle.net/uryJJ/32/

第一次编辑

.D {
height: 40px;
width: 40px;
float:left;
background-color: yellow;
position:relative;
left: -10px;
}
.E {
height: 50px;
width: 10px;
position: relative;
left: -10px;
background-color: black;
float: left;
}

http://jsfiddle.net/uryJJ/33/

Answer 5

对不起，我可能会把这个打死，但这解决了它：

.E {
height: 50px;
width: 10px;
margin-left: -10px;
background-color: black;
float: left;
}

http://jsfiddle.net/uryJJ/35/

直到现在，我才不喜欢负边际值。

Safari上的布局差异与margin-right否定

5 个答案: