John Slegers John Slegers - 5 months ago 24
CSS Question

Inconsistent behavior of display: table and display: table-cell in different browsers

When used on their own,

display: table
and
display: table-cell
behave differently in different browsers.




Environment



I did my testing in three different environments :

Environment 1 :


  • OS : Linux Ubuntu Desktop 14, 64-bit

  • Browser 1 : Chrome 45.0

  • Browser 2 : Firefox 43.0



Environment 2 :


  • OS : Windows 7, 64-bit

  • Browser 1 : Chrome 48.0

  • Browser 2 : Firefox 44.0



Environment 3 :


  • OS : Windows 10, 64-bit

  • Browser 1 : Chrome 51.0

  • Browser 2 : Firefox 47.0






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





In FireFox, I'm getting the following output :

enter image description here

In Chrome, I'm getting the following output :

enter image description here

See also this Fiddle.




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





In FireFox, I'm getting the following output :

enter image description here

In Chrome, I'm getting the following output :

enter image description here

See also this Fiddle.




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





In FireFox, I'm getting the following output :

enter image description here

In Chrome, I'm getting the following output :

enter image description here

See also this Fiddle.




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





In FireFox, I'm getting the following output :

enter image description here

In Chrome, I'm getting the following output :

enter image description here

See also this Fiddle.




My question(s) :




  • Do the specs define how
    display : table
    ,
    display : table-row
    and
    display : table-cell
    should behave when used independently from each other? If yes, which of these is the expected behavior?

  • Are these browser differences caused by a bug in either Chrome of Firefox? And if these browser differences are caused by a bug, is the dev team of either browser trying to get this fixed?

  • While these browser differences persist, what strategies for normalizing behavior across browsers should I consider?


Answer

From Everything You Know About CSS Is Wrong :

CSS tables happily abide by the normal rules of table layout, which enables an ex­tremely powerful feature of CSS table layouts: missing table elements are created anonymously by the browser. The CSS2.1 specification states:

Document languages other than HTML may not contain all the ele­ments in the CSS 2.1 table model. In these cases, the “missing” elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a “table”/“inline-table” element, a “table-row” element, and a “table-cell” element.

What this means is that if we use display: table-cell; without first containing the cell in a block set to display: table-row;, the row will be implied—the browser will act as though the declared row is actually there.

So, the specs explicitly allow the use of display: table-cell; or display: table; and define how elements should behave in that case.

It remains unclear to me what's the expected behavior in each of these cases, but it does appears that we're dealing with bugs, and that at least Chrome is working on fixing them.

I gave Oriol the bounty for this answer because it's the only answer I've had thusfar that actually addressed the points I raised and offered some valuable information.