FirefoxのCSSテーブル - コンテンツシフト

Chrome（v56）とFirefox（v51）の次のコードを比較すると、Firefoxがコンテンツを移動しています。 Chromeは期待どおりに動作します。FirefoxのCSSテーブル - コンテンツシフト

<html> 
<head> 
    <title>Test Page</title> 
    <style type="text/css"> 
    .content { 
     height: 200px; 
     width: 200px; 
    } 
    .table { 
     width: 100%; 
     height: 50%; 
     display: table; 
    } 
    .leftCell { 
     border: 1px solid #cccccc; 
     width: 50%; 
     height: 100%; 
     overflow: auto; 
     display: table-cell; 
    } 
    .rightCell { 
     width: 50%; 
     height: 100%; 
     display: table-cell; 
     border: 1px solid #cccccc; 
    } 
</style> 
</head> 
<body> 
<div class="content"> 
    <div class="table"> 
     <div class="leftCell"> 
      <div>row</div> 
      <div>row</div> 
      <div>row</div> 
      <div>row</div> 
     </div> 
     <div class="rightCell"></div> 
    </div> 
</div> 
</body> 
</html>

クローム：

のFirefox：

'rightCell' div要素が空のときにのみ問題が表示されます。そのdivを削除すると、内容が期待どおりに表示されます。誰もこの問題を以前に経験しましたか？これに関する既知の修正はありますか？よろしくお願いします。

出典

2017-02-20 Andrey

表のセルの内容がベースラインに沿って垂直に整列されているからです。その中にテキストがある場合、それが最初の行です。テキストがない場合は、セルの下の境界線です。この境界線は、投稿したイメージに表示されます。それは、ディスプレイのためのスニペットの結果を理由です。

は、それを避けるため、両方の細胞にvertical-align: topを割り当てるには（私のスニペットを参照）

.content { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 

 
.table { 
 
    width: 100%; 
 
    height: 50%; 
 
    display: table; 
 
} 
 

 
.leftCell { 
 
    border: 1px solid #cccccc; 
 
    width: 50%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 

 
.rightCell { 
 
    width: 50%; 
 
    height: 100%; 
 
    display: table-cell; 
 
    border: 1px solid #cccccc; 
 
    vertical-align: top; 
 
}

<div class="content"> 
 
    <div class="table"> 
 
    <div class="leftCell"> 
 
     <div>row</div> 
 
     <div>row</div> 
 
     <div>row</div> 
 
     <div>row</div> 
 
    </div> 
 
    <div class="rightCell"></div> 
 
    </div> 
 
</div>

出典

2017-02-20 00:48:12 Johannes

作品美しく。ありがとうございました！ – Andrey

FirefoxのCSSテーブル - コンテンツシフト

答えて

関連する問題