Wenn allein verwendet,display: table unddisplay: table-cell verhalten sich in verschiedenen Browsern unterschiedlich.

Umgebun

ch habe meine Tests in drei verschiedenen Umgebungen durchgeführ

Umwelt 1:

OS: Linux Ubuntu Desktop 14, 64-Bit Browser 1: Chrome 45.0Browser 2: Firefox 43.0

Umwelt 2:

OS: Windows 7, 64-Bit Browser 1: Chrome 48.0 Browser 2: Firefox 44.0

Umwelt 3:

OS: Windows 10, 64-Bit Browser 1: Chrome 51.0 Browser 2: Firefox 47.0Fall 1 -display: table & box-sizing: content-box

.container {
    display: table;
    width : 500px;
    height: 150px;
    background: #ccf;
}
    
.content {
    color: #000;
    height : 100%;
    padding: 20px;
    background: #ffc;
}

<div class="container">
    <div class="content">
        Lorem Ipsum
    </div>
</div>

n FireFox erhalte ich die folgende Ausgabe:

n Chrome erhalte ich die folgende Ausgabe:

Siehe auchdiese Geige.

Fall 2 -display: table & box-sizing: border-box

.container {
    display: table;
    width : 500px;
    height: 150px;
    background: #ccf;
}
    
.content {
    color: #000;
    height : 100%;
    padding: 20px;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #ffc;
}

<div class="container">
    <div class="content">
        Lorem Ipsum
    </div>
</div>

n FireFox erhalte ich die folgende Ausgabe:

n Chrome erhalte ich die folgende Ausgabe:

Siehe auchdiese Geige.

Fall 3 -display: table-cell & box-sizing: content-box

.container {
    display: table-cell;
    width : 500px;
    height: 150px;
    background: #ccf;
}
    
.content {
    color: #000;
    height : 100%;
    padding: 20px;
    background: #ffc;
}

<div class="container">
    <div class="content">
        Lorem Ipsum
    </div>
</div>

n FireFox erhalte ich die folgende Ausgabe:

n Chrome erhalte ich die folgende Ausgabe:

Siehe auchdiese Geige.

Fall 4 -display: table-cell & box-sizing: border-box

.container {
    display: table-cell;
    width : 500px;
    height: 150px;
    background: #ccf;
}
    
.content {
    color: #000;
    height : 100%;
    padding: 20px;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #ffc;
}

<div class="container">
    <div class="content">
        Lorem Ipsum
    </div>
</div>

n FireFox erhalte ich die folgende Ausgabe:

n Chrome erhalte ich die folgende Ausgabe:

Siehe auchdiese Geige.

Meine Fragen) Definieren die Spezifikationen, wiedisplay : table, display : table-row unddisplay : table-cell soll sich unabhängig voneinander verhalten? Wenn ja, welches ist das erwartete Verhalten? Werden diese Browserunterschiede durch einen Fehler in Chrome oder Firefox verursacht? Und wenn diese Browserunterschiede durch einen Fehler verursacht werden, versucht das Entwicklerteam eines der beiden Browser, dies zu beheben?Während diese Browserunterschiede bestehen, welche Strategien zur Normalisierung des Verhaltens zwischen den Browsern sollte ich berücksichtigen?