Firefox CSS-Tabelle - Inhalt wechselt

Beim Vergleich des folgenden Codes in Chrome (v56) und Firefox (v51) verschiebt Firefox den Inhalt nach unten. Chrome verhält sich wie erwartet.Firefox CSS-Tabelle - Inhalt wechselt

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

Chrome:

Firefox:

Das Problem wird nur angezeigt, wenn die 'rightCell' div leer. Wenn ich dieses div entferne, wird Inhalt angezeigt, wo erwartet. Hat jemand dieses Problem schon einmal erlebt? Irgendwelche bekannten Korrekturen dafür? Grüße

Quelle

2017-02-20 Andrey

Es ist, weil der Inhalt der Tabellenzellen vertikal entlang ihrer Basislinien ausgerichtet sind. Wenn Text darin ist, ist das die erste Zeile. Wenn sich kein Text darin befindet, ist dies der untere Rand der Zelle, den Sie in dem von Ihnen geposteten Bild sehen können. Das ist der Grund für die Anzeige in Ihrem Snippet Ergebnisse.

es zu vermeiden, weisen vertical-align: top zu beiden Zellen

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

Quelle

2017-02-20 00:48:12 Johannes

Works schön (meine Schnipsel sehen). Vielen Dank! – Andrey

Firefox CSS-Tabelle - Inhalt wechselt

Antwort

Verwandte Themen