Comportamiento inconsistente de display: table y display: table-cell en diferentes navegadores

Cuando se usan solos,display: table ydisplay: table-cell comportarse de manera diferente en diferentes navegadores.

Ambiente

Hice mis pruebas en tres entornos diferentes:

Entorno 1:

SO: Linux Ubuntu Desktop 14, 64 bitsNavegador 1: Chrome 45.0Navegador 2: Firefox 43.0

Entorno 2:

SO: Windows 7, 64 bitsNavegador 1: Chrome 48.0Navegador 2: Firefox 44.0

Entorno 3:

SO: Windows 10, 64 bitsNavegador 1: Chrome 51.0Navegador 2: Firefox 47.0Caso 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>

En Firefox, obtengo el siguiente resultado:

En Chrome, obtengo el siguiente resultado:

Ver tambiéneste violín.

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

En Firefox, obtengo el siguiente resultado:

En Chrome, obtengo el siguiente resultado:

Ver tambiéneste violín.

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

En Firefox, obtengo el siguiente resultado:

En Chrome, obtengo el siguiente resultado:

Ver tambiéneste violín.

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

En Firefox, obtengo el siguiente resultado:

En Chrome, obtengo el siguiente resultado:

Ver tambiéneste violín.

Mis preguntas) :¿Las especificaciones definen cómodisplay : table, display : table-row ydisplay : table-cell debe comportarse cuando se usa independientemente el uno del otro? En caso afirmativo, ¿cuál de estos es el comportamiento esperado?¿Estas diferencias en el navegador son causadas por un error en Chrome o Firefox? Y si estas diferencias en el navegador son causadas por un error, ¿el equipo de desarrollo de cualquiera de los dos navegadores intenta solucionarlo?Si bien estas diferencias del navegador persisten, ¿qué estrategias para normalizar el comportamiento en todos los navegadores debería considerar?

Respuestas a la pregunta(3)

Su respuesta a la pregunta