表格行中絕對定位元素中的垂直對齊在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％，因爲它是第一個定位父元素。

在我的測試中，這個問題似乎是由row元素上的display:table-row造成的，導致其position屬性由Chrome計算爲static。顯然，the spec將此行爲留給瀏覽器以確定哪些是您獲得不同行爲的原因。

「位置：相對於」的效果對錶列的基團， 表頭的基團，表英尺的基團，錶行，表列基團， 表列，表-cell，並且table-caption元素未定義。