html - 意外的 CSS 行为？

Question

在尝试使用没有 parent 高度的容器的整个高度的分隔线时，我偶然发现了以下情况。谁能弄清楚为什么将分隔线设置为 position:absolute 和 display:inline-block 不会导致它们像预期的那样一直 float 到父容器的左侧？为什么它们实际上是内联的？

HTML

<div class="wrapper">
  <div class="box"></div>
  <div class="divider"></div>
  <div class="box"></div>
  <div class="divider"></div>
  <div class="box"></div>
</div>

CSS

.wrapper{
  width:100%;
  text-align:center;
  position: relative;
}

.box{
  display: inline-block;
  width: 150px;
  height: 100px;
  background: red;
  margin: 0 0 0 5px;
}

.divider{
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: black;
}

JSFIDDLE

Answer 1

那是因为 left 和 right 都是 auto。

然后，根据§10.3.7 ,

[If] 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position] containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static-position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').

其中静态位置定义为

The static position for 'left' is the distance from the left edge of the containing block to the left margin edge of a hypothetical box that would have been the first box of the element if its 'position' property had been 'static' and 'float' had been 'none'.

如果你不想这样，指定一个值:

.divider {
  left: 0;
}