DIV 元素上的 css-prop 轮廓未显示或不正确

Question

我在寻找另一个故障时想出了这个..

奇怪的事情正在发生..

.blok {
  outline: 1px solid red;
}
.blok > label {
  padding-top: 7px;
  margin-bottom: 0;
  text-align: right;
  width: 41.66666667%;
  float: left;
  outline: 1px solid green;
}
.blok > div {
  outline: 1px solid yellow;
  height: 50px;
}

<div class="blok">
  <label>
    Deep in the night
  </label>
  <div>
    I was looking for some fun
  </div>
</div>

关于.blok > div : outline

在 Chrome 和 Safari 中，我根本没有得到任何大纲.. 在 Firefox 中，我覆盖了父母的大纲..

我正在寻找发生这种情况的原因.. 我知道我可以在div > div 上使用display: inline-block;

我知道这看起来是一个非常愚蠢的问题，因为我知道在罕见情况下解决问题的方法.. 但对我来说知道什么和谁错了很重要..

提前致谢！

Answer 1

这是因为margins are collapsing。

在 CSS 中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合成一个边距。以这种方式组合的边距称为折叠边距，由此产生的组合边距称为折叠边距。

当两个或多个边距折叠时，产生的边距宽度为 最大折叠边距的宽度。在否定的情况下 边距，负相邻的绝对值的最大值 边距从正相邻的最大值中扣除 边距。如果没有正边距，则绝对值的最大值 相邻边距的值从零中扣除。

看看Updated jsFiddle 现在工作正常。

.blok > div {
  outline: 1px solid yellow;
  height: 50px;
  overflow: hidden; /* this line added */
  float: left; /* this line added */
}

建立新块格式化上下文的元素的边距（例如 因为浮动和具有“溢出”而不是“可见”的元素）不 和他们流入的孩子一起崩溃。

Answer 2

关于轮廓最重要的一点是“轮廓不是元素尺寸的一部分”。 [http://www.w3schools.com/css/css_outline.asp]

由于 div 是块级元素，因此内部 div 的尺寸和外部 div 的尺寸是相同的。因此，内部 div 和外部 div 的轮廓显示在相同的视觉空间中，在基于 webkit 的浏览器中显示父级的轮廓，而在 gecko (firefox) 浏览器中显示子级的轮廓。

查看堆叠规范 (http://www.w3.org/TR/CSS21/zindex.html#outlines)。实现上的差异来自 E.2 7.2.2 和 E.2 10，导致行为差异。在这种情况下，据我了解，基于 Gecko 的浏览器 E.2 7.2.2 和 webkit 遵循 E.2 10。