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.
Fiz meus testes em três ambientes diferentes:
Ambiente 1:
SO: Linux Ubuntu Desktop 14, 64 bitsNavegador 1: Chrome 45.0Navegador 2: Firefox 43.0Ambiente 2:
SO: Windows 7, 64 bitsNavegador 1: Chrome 48.0Navegador 2: Firefox 44.0Ambiente 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?