Closed Bug 737757 Opened 12 years ago Closed 12 years ago

Element with both display:inline-block and overflow:hidden causes incorrect height in parent with height:auto

Categories

(Firefox :: Untriaged, defect)

Product:
Firefox
Component:
Untriaged
Version:
13 Branch
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 491549

People

(Reporter: tang.ddt, Unassigned)

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.79 Safari/535.11

Steps to reproduce:

Create and then open a page with the following HTML:

<!doctype html>
<html>
  <head>
    <style>
      .parent {
        background: #389;
      }
      .child {
        display: inline-block;
        overflow: hidden;
        background: #8e4;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">
        Text
      </div>
    </div>
  </body>
</html>


Actual results:

The parent <div> element renders with a height greater than the child <div> element.


Expected results:

The parent <div> element should have a height equal to the child <div> element.
Setting the child's vertical-align to anything other than baseline produces the correct height.
This is according to spec see bug 491549 comment 9.
Status: UNCONFIRMED → RESOLVED
Closed: 12 years ago
Resolution: --- → DUPLICATE
Thanks Cork. That certainly helps to understand the cause of the extra height.

However, the other bug is describing an alignment issue. In light of the specification mentioned in the other bug, FF's behaviour makes sense when there is inline text before or after the child <div>. In the case where there is no other content in the parent <div>, there is no other baseline to align to, and thus the extra height does not make sense.

This is further emphasized in a case such as this:

<ul class="parent">
    <li class="child">Text</li><li class="child">Text</li>
</ul>

Your thoughts?
Actually the extra space at the end of the parent is part of the other bug too, and yes its expected. (its called "extra margin at bottom" in the bug)
David Tang's workaround above (setting vertical-align to a value other than baseline) worked for me.
You need to log in before you can comment on or make changes to this bug.