当父元素具有vertical-align：top时，子元素的文本未与Chrome中父元素的文本对齐

Question

考虑这个HTML：

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

这个CSS：

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

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

这是JSFiddle演示：http://jsfiddle.net/ePBZz/

使用Firefox 28.0和Internet Explorer 8，两者都是＆＃39; Bar＆＃39;和＆＃39; Baz＆＃39;出现在同一条线上。但是，使用Chrome 33.0时，它们不会出现在同一行中。

（左侧使用Firefox输出;右侧使用Chrome输出）

来自＆＃39; Inspect元素＆＃39; Firefox和Chrome的功能我认为在这两种情况下span元素都遵循使用vertical-align: baseline（默认值）的标准。因此，当span用于父元素时，Chrome必须使用与vertical-align: top元素不同的基线定义，否则我不知道如何解释Chrome和Firefox之间输出的差异

顺便说一下，我知道如何修复这段代码。通过在CSS中添加以下内容。

#y span {
  vertical-align: inherit;
}

这会强制子span元素从父vertical-align: top元素继承#y。但是，这不是我的问题。

我想知道哪一个是错误的行为，哪一个是正确的行为，根据我的代码的W3C CSS标准没有我后面提到的修复，或者这种代码的结果是否未被标准指定。如果可能，请引用W3C文档中的部分，以澄清此类代码的行为。

Answer 1

在阅读CSS 2.1 specification (W3C Recommendation 07 June 2011)之后，在我看来Chrome和Firefox都是正确的，他们可以自由选择不同的基线。

第9.2.2节。定义内联级别框的内容。

  

9.2.2内联级元素和内联框

     

内联级元素是源文档的那些元素   不要形成新的内容块;内容按行分发   （例如，段落中强调的文本片段，内嵌图像，   等等。）。 ＆＃39;显示＆＃39;以下值属性是一个元素   内联级：＆＃39;内联＆＃39;，＆＃39;内联表＆＃39;和＆＃39;内联块＆＃39;。   内联级元素生成内联级框，它们是框   参与内联格式化上下文。

     

内联框是内联级别及其内容的框架   参与其包含内联格式上下文。一个   带有＆＃39;显示的未替换元素＆＃39; ＆＃39;内联＆＃39;的价值生成一个   内联框。不是内联框的内联级框（例如   替换了内联级元素，内联块元素和   内联表元素）被称为原子内联级框，因为   他们作为单个不透明参与其内联格式化上下文   框。

第9.4.2节定义了一个换行符。

  

9.4.2内联格式化上下文

     

在内联格式化上下文中，框是水平布局的，一个   在另一个之后，从包含块的顶部开始。   这些之间会考虑水平边距，边框和填充   框。盒子可以以不同的方式垂直对齐：它们   底部或顶部可以对齐，或者其中的文本基线   可以对齐。包含形成框的矩形区域   一行称为行框。

然后第10.8节提到：

  

内联级别框根据其垂直对齐   ＆＃39;垂直对齐＆＃39;属性。如果他们对齐＆＃39;顶部＆＃39;或者＆＃39;底部＆＃39;，   它们必须对齐，以尽量减少线盒高度。如果是这样   盒子足够高，有多种解决方案和CSS 2.1   没有定义线框的基线位置（即位置   支柱，见下文）。

这似乎适用于http://jsfiddle.net/ePBZz/的代码。在此代码中，vertical-align: top已应用于div id="y"，其定义如下。

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

此元素中有两个内联级别框。两个内联级别框为：

1. 匿名：＆＃34; Bar＆＃34;
2. SPAN：＆＃34; Baz＆＃34;

现在还不清楚内联级别的盒子足够高的真正意义，但是如果我们假设这两个内联级别的盒子足​​够高，那么就像上次引用的那样文本，标准没有定义包含这两个内联级框的线框的基线。因此，Chrome和Firefox可以自由选择不同的基线，并将第二个内联级别框（SPAN：＆＃34; Baz＆＃34;）的基线与这些不同选择的基线对齐，从而产生不同的输出。