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 :

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?

回答1:

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>

回答2:

From Everything You Know About CSS Is Wrong :

CSS tables happily abide by the normal rules of table layout, which enables an extremely 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 elements 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.

来源：https://stackoverflow.com/questions/35327767/inconsistent-behavior-of-display-table-and-display-table-cell-in-different-bro

标签

html