CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Susam Pal
Susam Pal

Reputation: 34164

Child element's text is not aligned with parent's element text in Chrome when parent element has vertical-align: top

Consider this HTML:

<div id="x">Foo</div>
<div id="y">Bar <span>Baz</span></div>

And this CSS:

#x {
  background: orange;
  display: inline;
  font-size: 200%;
}

#y {
  background: cyan;
  display: inline;
  vertical-align: top;
}

Here is the JSFiddle demo: http://jsfiddle.net/ePBZz/

With Firefox 28.0 and Internet Explorer 8, both 'Bar' and 'Baz' appear on the same line. However, with Chrome 33.0, they do not appear on the same line.

enter image description here enter image description here

(Output with Firefox on left; Output with Chrome on right)

From the 'Inspect element' feature of Firefox and Chrome I figure that in both cases the span element obeys the standard of using vertical-align: baseline (the default). So Chrome must be using a different definition of baseline for the span element than Firefox when vertical-align: top is used for the parent element, otherwise I do not know how to explain the difference in the output between Chrome and Firefox.

By the way, I know how to fix this code. By adding the following to the CSS.

#y span {
  vertical-align: inherit;
}

This would force the child span element to inherit vertical-align: top from the parent #y element. However, that is not my question.

I want to know which one is the buggy behaviour and which one is the correct behaviour as per the W3C CSS standard for my code without the fix I mentiond later, or if the result of this kind of code is unspecified by the standard. If possible, please quote the sections from the W3C documents that clarifies the behaviour for such code.

Upvotes: 3

Views: 250

Answers (1)

Susam Pal
Susam Pal

Reputation: 34164

After reading CSS 2.1 specification (W3C Recommendation 07 June 2011) it seems to me that both Chrome and Firefox are correct and they are free to choose different baselines.

Section 9.2.2. defines what an inline-level box is.

9.2.2 Inline-level elements and inline boxes

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

Section 9.4.2 defines what a line box is.

9.4.2 Inline formatting contexts

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.

Then section 10.8 mentions:

The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).

This seems to apply to the code at http://jsfiddle.net/ePBZz/. In this code, vertical-align: top has been applied to the div id="y" which has been defined as follows.

<div id="y">Bar <span>Baz</span></div>

There are two inline-level boxes in this element. The two inline-level boxes are:

  1. Anonymous: "Bar"
  2. SPAN: "Baz"

Now it is not clear what it really means for inline-level boxes to be tall enough, but if we assume that these two inline-level boxes are tall enough, then as per the last quoted text, the standard does not define the baseline of the line box that contains these two inline-level boxes. As a result, Chrome and Firefox are free to choose different baselines and align the baseline of the second inline level-box (SPAN: "Baz") with these differently chosen baselines, thereby producing different outputs.

Upvotes: 1

Related Questions