Safari上的布局差异与margin-right负数

Question

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

你可以查看jsfiddle here

在 Firefox/Chrome 上，布局与预期一致，黄色 div 正好在 红色 div 之后。但在 Safari 上，黄色 div 位于 在红色 div 之下。

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

我想我理解为什么 Safari 会以这种方式呈现它。 B 类的 div 的宽度计算为其子级的宽度之和，因为它们具有属性 float: left;。

这里是widthB = widthB2*2 + widthE + marginRightE + widthC 或marginRightE < -widthE，所以widthB 不够大，无法包含相邻的每个div。

所以我的问题是：

1. 我对 Safari 功能的理解是否正确？
2. 为什么 Chrome 和 Firefox 的呈现方式不同？他们只是没有根据否定的margin-right 减小父 div 的宽度吗？
3. 在这种情况下，正确的修正是否总是使 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

第二次编辑：

我认为我们应该将这两个问题联系起来：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 的宽度？我会说是的。为了解决这个问题并获得你想要的结果，我会将 E 类的 div 移动到 B2 类的最右边的 div 中。然后将 E 向右浮动，去掉 position、left 和 margin-right 属性。

.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 2

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

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

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

直到现在我才喜欢负边距值。

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;
}

演示：http://jsfiddle.net/uryJJ/22/

我希望这会有所帮助！

Answer 4

我不确定您期望在 JS 小提琴中使用 CSS 会发生什么。您正在研究未定义的行为。我这样说是因为：

• 'C' 是浮动的，但没有定义的宽度。根据布局的复杂性，这会导致各种浏览器出现问题。

• 没有任何浮动元素被清除。浮动时必须使用某些描述的clearfix，无论是clear:both等。

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

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

如果您在网络检查器中使用此功能，您会发现负边距几乎是导致下降的原因。我认为这可能是由于容器没有宽度，并且本身不是相对位置。

如何解决？

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

但是，在我看来，您可以将 'B2' + 'E' 元素包装在浮动和相对定位的包装器中，然后在 'E' 上使用绝对定位来产生相同的效果并删除负边距。

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

Answer 5

对不起，这不是一个真正的答案，但它太长了，无法发表评论...... 无论如何，我花了一分钟才弄清楚这一点。

我在 Mac OS X 10.8.2、Chrome 24.0 (Mac) 和 Safari 6.0.2（以及 Mac）上使用了 Firefox 19。使用网络检查器工具，我意识到 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 中正确显示。