Comportamento inconsistente de display: table e display: table-cell em diferentes navegadores

Quando usados por conta própria,display: table edisplay: table-cell se comporta de maneira diferente em diferentes navegadores.

Meio Ambiente

Fiz meus testes em três ambientes diferentes:

Ambiente 1:

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

Ambiente 2:

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

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

No FireFox, estou obtendo a seguinte saída:

No Chrome, estou obtendo a seguinte saída:

Veja tambémeste violino.

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>

No FireFox, estou obtendo a seguinte saída:

No Chrome, estou obtendo a seguinte saída:

Veja tambémeste violino.

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>

No FireFox, estou obtendo a seguinte saída:

No Chrome, estou obtendo a seguinte saída:

Veja tambémeste violino.

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>

No FireFox, estou obtendo a seguinte saída:

No Chrome, estou obtendo a seguinte saída:

Veja tambémeste violino.

Minhas perguntas) :As especificações definem comodisplay : table, display : table-row edisplay : table-cell deve se comportar quando usado independentemente um do outro? Se sim, qual destes é o comportamento esperado?Essas diferenças no navegador são causadas por um bug no Chrome do Firefox? E se essas diferenças no navegador são causadas por um bug, a equipe de desenvolvimento de um ou outro navegador está tentando consertar isso?Enquanto essas diferenças de navegador persistirem, quais estratégias para normalizar o comportamento entre navegadores devo considerar?

questionAnswers(3)

yourAnswerToTheQuestion