5

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

你可以在这里查看 jsfiddle

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

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

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

在这里，widthB = widthB2*2 + widthE + marginRightE + widthCwidthBmarginRightE < -widthE不够大，无法包含彼此相邻的每个 div。

所以我的问题是：

  1. 我对 Safari 功能的理解是否正确？
  2. 为什么 Chrome 和 Firefox 的呈现方式不同？他们只是没有根据负数减少父 div 的宽度margin-right吗？
  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;
}
4

5 回答 5

2

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

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

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

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

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

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

怎么修？

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

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

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

于 2013-01-22T22:54:07.343 回答
1

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

我在 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 中正确显示。

于 2013-01-19T00:50:32.217 回答
1

对类.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/

我希望这有帮助！

于 2013-01-23T18:46:52.660 回答
1

第二次编辑：

我认为我们应该将这两个问题联系起来：https ://stackoverflow.com/questions/4989930/css-negative-margin以及为什么使用负边距？到这个。

另请参阅有关边际的 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/

于 2013-01-24T08:53:35.117 回答
0

抱歉，我可能会把它打死，但这可以解决它：

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

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

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

于 2013-01-24T19:08:53.480 回答