Bug 17101 – CSS line-height should be inherited from the UL to the LI

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Anantha Keesara]

I. Steps:
Go to: http://www.linternaute.com/biographie

II. Issue:
Notice the spacing in between lines on left navigation. 

III. Other browsers:
In Safari, Opera, there is less spacing compared to FF and IE.

IV. Nightly tested: r29807

[Anantha Keesara]

Created attachment 18801 [details]
Screenshot

[Anantha Keesara]

Created attachment 18802 [details]
Reduction

[Dave Hyatt]

This is our line-shrinking quirk to match WinIE.  In strict mode, the line-height will be present.  I'm surprised that Firefox has the spacing.   Does WinIE also have the spacing?  If so, maybe there is something wrong with our quirk.

[Dave Hyatt]

Could the reporter test WinIE?

[Anantha Keesara]

WinIE also has the spacing. checked with both IE6 and IE7.

[Dave Hyatt]

Interesting.

[Dave Hyatt]

I am baffled.  I guess there is something about the text quirk that I don't understand.  Maybe it doesn't apply to root line boxes if the line contains any text at all?

[Dave Hyatt]

This seems to be something unique about <li>.  Even though list-style-type is none, I think there is a "phantom" bullet or list marker that is growing the height of the line.  This is insane.

[Dave Hyatt]

The best solution I can come up with is for <li> to make sure to turn off the quirk just for its root line boxes.

[Dave Hyatt]

Created attachment 18828 [details]
Patch that turns off the quirk for <li>'s line boxes.

[Eric Seidel (no email)]

Comment on attachment 18828 [details]
Patch that turns off the quirk for <li>'s line boxes.

Looks good.  Changelog and results, obviously.  Also, wrap your comment a bit shorter. :)

[Dave Hyatt]

Fixed.

[Yuzhu Shen]

It seems that r29892 for InlineFlowBox.h
    m_hasTextChildren = obj->style()->display() == LIST_ITEM;
doesn't solve the problem perfectly.

Consider this example in quirks mode,
===================================================
<li style="float:left; list-style-type: none">
    <img src="" height="99" width="186" alt="" style="border: 1px solid"/>
</li>
===================================================

Since the <li> has float:left in its style, it is displayed as block and m_hasTextChildren is set to false. As a result, the <li> doesn't have a gap under the <img>.

While in IE and Firefox, the <li> still has a gap under the <img>. (Tested in IE7, Firefox2/3.)