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

Question

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 :

In Chrome, I'm getting the following output :

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 :

In Chrome, I'm getting the following output :

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 :

In Chrome, I'm getting the following output :

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 :

In Chrome, I'm getting the following output :

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?

Subdue

both test are not valid, cause a table-cell element to work properly would require a table parent, & a table or table-row for a table-cell element. on both test case you use half of the structure and rules required. note that a single cell will be 100% height of a table-row or table that is CSS or plain html table.. all brother try to figure out the best way to draw these at screen .... not sure you can get an answer here :) – Gosselin

@GCyrillus : I would VERY MUCH appreciate it if you could elaborate on your statements that both test are not valid and both test cases I'm using half of the structure and rules required. Can you provide source references for "the structure and rules required" that indicate my "test are not valid"? If yes, that might be the answer I'm looking for... – Subdue

have you ever had the idea to use a td on its own or use a div as first child of a table ? table is display:table, tr is table-row, tfoot is table-footer-group and so on , why don't you pickup just another one to see how it behaves on its own ? :) . only source i trust are W3C where you'll find what these display option involve :) My opinion is that your test are not valid cause html/css base are incomplete and if it fails it seems to me not surprising or at least it cannot be taken as a reference ;) – Gosselin

@GCyrillus : For the last couple of years, I've been seeing display : table and display : table-cell as stand-alone statements in other people's code all the time. I guess they ARE kind of hacks, really, but this is the first time that I see anyone argue it is improper use of CSS. That IS what you're saying, right? – Subdue

firefox 1 was the first browser i used than could handle display:table (aside was that painfull IE6) at this time, when you would set a container as display:table, direct-child where turned to display:table-cell by defaut, not the case anymore because display:table on its own is an easy way to deal with float elements for instance. but it was not meant at first to be used on its own, i do not state its improper but it involves a behavior and if you have unexpected results i see not much surprise about it. display:flex is much more reliable for this kind of use today :) – Gosselin

Answer 1

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.

Subdue

Answer 2

In the first snippet, since .content has a percentage height but its parent (an anonymous table-cell) has height: auto, the percentage should compute to auto. See the spec:

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

Chromium has already fixed this issue (bug 353580) since version 50.0.2629.0 (commit).

The second snippet is more tricky, because the height of the table cell will be the maximum between the length given by the height CSS property and the height required by the content. But if that content uses a percentage, it's a circular definition.

Therefore, this seems an implementation-dependent case. You can avoid the circular definition by taking the content out-of-flow:

.container {
  position: relative;
}
.content {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.container {
  display: table-cell;
  width : 500px;
  height: 150px;
  background: #ccf;
  position: relative;
}
.content {
  color: #000;
  padding: 20px;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #ffc;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="container">
  <div class="content">
    Center this!
  </div>
</div>

Haletta

So you're saying the different behavior for display : table-cell is not caused by a bug, but rather by the lack of proper standards / specs? Are there other such CSS inconsistencies you can think of (caused by a lack of proper standards / specs) that I need to keep in mind? – Subdue

@JohnSlegers Yes, it seems that. CSS2.1 didn't define (or defined loosely) many things. It was expected to clarify them later in CSS3, but AFAIK no work has been done in CSS tables. – Haletta

Chomium 50 is an alpha or beta release, I assume? Anyway, I just tested it on the latest stable release (Chrome 48), and I'm getting the same results that I got for Chrome 43. – Subdue

@JohnSlegers Not sure whether Chromium has release channels. The change landed on version 50.0.2629.0 – Haletta

@JohnSlegers, in answer to your second question in your first comment, I just wrote about this today: https://mcmap.net/q/37038/-heights-rendering-differently-in-chrome-and-firefox-duplicate/3597276 – Luisluisa

btw, nice to see you take a break from tag wiki edits ;-) – Luisluisa

@Michael_B : Thanks for the link. And, with respect to your second comment... I try to make myself useful. As several of the tag wiki edits weren't considered as useful by others as I considered them myself, I figured there were better uses for my precious time. Pragmatism rules! ;-) – Subdue

Your edits are a valuable contribution. Plus you make my reviews quick and easy :-) – Luisluisa

Just tested everything in Firefox 47.0 and Chrome 51.0. Inconsistencies still haven't been fixed! – Subdue

@JohnSlegers True. CSS Tables 3 should clarify these cases. It's updated frequently so it seems they are actively working on it, but you will have to wait until it stabilizes and browsers implement it. – Haletta