表格行中绝对定位元素中的垂直对齐在Chrome中获得不正确的高度

Question

我有一个奇怪的问题，绝对定位的元素设置为100％高度。在Firefox中，元素的高度变为其父级（具有position:relative）的高度，而在Chrome中，元素的高度向下延伸超过其父级。

.outer
{
  display:table;
  height:150px;
  width:100%;
  position:relative;
  background:gray;
}

.left, .right
{
  position:absolute;
  top:0;
  height:100%;
  background:yellow;
}

.item
{
  display:inline-block;
}

.left
{
  left:0;
}

.right
{
  right:0;
  
}

.helper
{
  display:inline-block;
  height:100%;
  vertical-align:middle;
}

.row
{
  position:relative;
  display:table-row;
  background:orange;
  height:100%;
}

<div class="outer">
  <div class="row">
    <div class="left">
      <div class="helper"></div>
      <div class="item">L</div>
    </div>
    <div class="right">
      <div class="helper"></div>
      <div class="item">R</div>
    </div>
  </div>
  <div>
    <p>Text in here</p>
  </div>
</div>

在Firefox中，黄色L和R div与橙色相同。在Chrome中，它们向下延伸并与灰色背景div重叠。

编辑：刚刚在IE和Edge中测试过，它们与Chrome有相同的行为。

以下是我在FF（左）和Chrome（右）中的问题图片：

Answer 1

问题是Chrome正在计算row元素的样式为position:static。 row元素的父元素（outer元素）设置为position:relative但是这允许绝对定位的元素left和right来取其高度的100％，因为它是第一个定位的父元素。

在我的测试中，此问题似乎是由display:table-row元素上的row引起的，导致Chrome将position属性计算为static {{1}}。显然，the spec会将此行为留给浏览器，以确定您为什么会遇到不同的行为。

  

＆＃39;位置的影响：相对＆＃39;在表行组，   table-header-group，table-footer-group，table-row，table-column-group，   table-column，table-cell和table-caption元素未定义。