css-prop DIV 元素的大纲未显示或不正确

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 中，我得到 none 大纲.. 在 Firefox 中我有 parents 大纲被覆盖..

我正在寻找发生这种情况的原因.. 我知道我可以在 div > div

上使用 display: inline-block;

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

提前致谢！

Answer 1

发生这种情况是因为 margins are collapsing。

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.

看看 Updated jsFiddle 现在工作正常。

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

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

Answer 2

大纲最重要的是"The outline is NOT a part of an element's dimensions"。 [http://www.w3schools.com/css/css_outline.asp]

由于 div 是块级元素，内部 div 的尺寸和外部 div 的尺寸相同。因此，内部 div 和外部的轮廓显示在相同的视觉效果 space 中，在基于 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.

css-prop DIV 元素的大纲未显示或不正确

css-prop outline on DIV element not showing or incorrect

css

outline