325638 - Line spacing of <span> inside <div> is increased with Strict Doctype

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[AJS]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

The following renders different in Strict mode vs non-Strict.  And it renders differently than IE, even in Strict mode.  Now, it's possible that Firefox is doing this on purpose, and IE is missing it even in Strict mode, but I can't rationalize it.

The difference is the line spacing, so make sure there is enough text to cause it to wrap once or twice.

If I add "display:block" to the <span> than it works the same everywhere.

<div><span style="font-size:0.5em">Lorem ipsum ... lots of text </span></div>

See attachment.

Reproducible: Always

Steps to Reproduce:
1. View the attachment
2 [review].
3.

Actual Results:  
Line spacing is larger than it seems like it ought to be.

Expected Results:  
Line spacing should be the same as in Transitional mode.

Is it intentional that the <DIV> controls the line spacing, even when it contains only a single (inline) element that itself changes the font size?  If so, odd that this behavior is not picked up by IE in Strict Mode.  Is this a bug?

Comment 1

[AJS]

Attachment: Testcase

Comment 2

[AJS]

Attachment: another one, this time using tables

Comment 3

[Thomas Andrews]

The CSS 2.1 standard for line-height is at:

    http://www.w3.org/TR/CSS21/visudet.html#line-height

The way I read it is that the exterior 'block' box determines the minimum line-height.  In the CSS 2.0 standard, it says

   If the property is set on a block-level element whose 
   content is composed of inline-level elements, it specifies 
   the minimal height of each generated inline box.
   [ http://www.w3.org/TR/REC-CSS2/visudet.html#line-height ]

The 2.1 standard does not say 'If the property is set...', but rather:

   On a block-level, table-cell, table-caption or inline-block element 
   whose content is composed of inline-level elements, 'line-height'
   specifies the minimal height of line boxes within the element.]

So that would seem to include computed 'line-height' values, rather than just the case where the 'line-height' is 'set.'  So the div's computed line-height is supposed to be the minimum.

Comment 4

[AJS]

Thomas, I see where you are coming from on that, but it's not perfectly clear as I read it (with admittedly less experience, I'm sure).  The sentence you cite, "On a block-level, table-cell..." appears as part of (i.e. within the subsection of) the description of the line-height property itself -- arguably only applying when the property is specified.

There's that section above it, the steps (1)-(4) of section 10.8, that may offer another interpretation, I don't know.

Even if the browser is interpreting this correctly, there must be a way to get back to the old non-Strict behavior, but I can't think of any construct that works.  I essentially want the DIV to not impose its line-height on the inline elements within it.  Actually, I can add "line-height:1em" to every <span> inside the <div>, but this does not seem all that practical.

Comment 5

[dolphinling]

This is intentionally different in Quirks and Standards modes. See http://developer.mozilla.org/en/docs/Mozilla_Quirks_Mode_Behavior and https://bugzilla.mozilla.org/show_bug.cgi?id=24186

The behavior is correct in Standards mode, and that's not going to change. In terms of fixing your problem, you have a couple options, the best of which is probably to set the font-size on the div instead of the span. (If you can't do that, try setting the line-height of the div to something smaller.)