テーブル行内の絶対配置要素の垂直方向の配置がChromeで高さが正しくない

Question

絶対配置された要素が100％の高さに設定されていると奇妙な問題が発生します。 Firefoxでは、要素の高さは親の高さ（position:relative）になりますが、Chromeでは要素の高さは親を超えて下がります。 Firefoxので

.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>

、イエローLとRのdivは、オレンジと同じ高さです。クロームでは、下に伸びて灰色の背景divと重なります。

編集：IEとEdgeでテストされ、Chromeと同じ動作をします。ここで

は、FF（左）とChrome（右）での私の質問の画像です：

Answer 1

問題はChromeがposition:staticであるためにあなたのrow要素のスタイルを計算されています。 row要素の親要素（outer要素）はposition:relativeに設定されています。これにより、最初に配置された親要素であるため、絶対配置要素であるleftとrightが100％占有できます。

私のテストでは、この問題はrow要素のdisplay:table-rowによって、そのpositionプロパティがstaticとして計算される原因となっているようです。明らかに、the specは、この動作をブラウザに任せて、どの動作が異なるのかを判断します。

「位置：相対」の効果表行グループ、 テーブルヘッダグループ、テーブルフッタグループ、テーブル行、テーブルの列グループに、 テーブル列、テーブル-cell、table-caption要素は未定義です。