Closed Bug 1211829 Opened 9 years ago Closed 9 years ago

Display:table-cell and font-size: strange behaviour on cells' height in Firefox

Categories

(Core :: General, defect)

Product:
Core
Component:
General
Version:
41 Branch
Platform:
x86_64
Windows 7
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 569645

People

(Reporter: ldetomi, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0
Build ID: 20150929144111

Steps to reproduce:

I created a jsFiddle (http://jsfiddle.net/fp6cfwb4/) to reproduce problem.

Relevant part of CSS is the following:

.cell { display: table-cell; width:35px; height:12px; font-size:1px; overflow:hidden; line-height:1em; }


Actual results:

In Firefox, if I increase font-size (with inspector for example) until 13px, cells' height decrease instead of increase. Over this threshold, cells' height start to increase to accomodate test strings. height property seems completely ignored.

Forcing vertical-align makes Firefox behaviour similar to Chrome one (cells' height remains fixed until text fit inside them). I don't know why, but seems that for Firefox is necessary to force this property.



Expected results:

In Chrome, beahaviour is almost one desired (increasing font-size results in a continuous cells' height increase) but, again, height property seems completely ignored.

If I don't set display: table-cell;, increase of font-size does not affect DIVs' height and eventually too big text is simply hidden thanks to overflow:hidden.
OS: Unspecified → Windows 7
Hardware: Unspecified → x86_64
Status: UNCONFIRMED → NEW
Component: Untriaged → General
Ever confirmed: true
Thank you for the bug report.

So the basic testcase here is:

  <!DOCTYPE html>
  <style>
    td { background: yellow; height: 12px; font-size: 1px; line-height: 1em; width: 20px }
  </style>
  <table>
    <tr>
      <td>Some text</td>
      <td><!-- empty --></td>
    </tr>
  </table>

The issue here is that the two cells need to be baseline-aligned.  The baseline of the empty cell is at that bottom of its content area.  The baseline of the other cell is at the bottom of the text, and since the text and line-height are both tiny this ends up being near the top of its content area.  Both content areas are 12px tall (this is a bug, more on this in a sec), so you get a total row height around 23px (12 + 12 - 1).

Per spec, the content areas of the cells should not be 12px.  Instead, the 12px height style should affect the height of the row directly.  This is covered by bug 569645.
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.