在现代浏览器中,内联元素在标记结束之前没有折叠空格？

Question

示例:http://jsfiddle.net/9e81ytwg/

<div>Foo <span> Bar </span> Baz</div>

*{font-size:30px;font-family:monospace}
span{background:red;}

在旧版浏览器中呈现:

在现代浏览器中呈现:

• BEFORE Bar有两个空格,它们会折叠成一个单独的空格,显示为WHITE
• Bar后面有两个空格,它们会折叠成一个显示为RED的单个空间

为什么这个区别？为什么它与几个月前的工作方式不同？

是否存在渲染更改的特定规格/点？我原本期望它在旧版浏览器中的运作方式.或者这是一个错误？

Answer 1

http://www.w3.org/TR/CSS2/text.html#white-space-model(强调我的):

如果'white-space'设置为'normal','nowrap'或'pre-line'

1. 每个标签(U + 0009)都转换为空格(U + 0020)
2. 跟随另一个空间(U + 0020)的任何空间(U + 0020) - 即使是内联之前的空格,如果该空间也将"白色空间"设置为"正常","现在"或"预先行" - 是除去.

因此,您看到的行为是完全正确的:所有空格都是从后向前折叠的,因此前面的空格不是红色(它折叠到"内联之前的空间")而后面的空格是(随着其他空间崩溃)进去).

我不知道你提到哪些'遗留浏览器',但可能这是他们的引擎中的错误修正,因为这已经在这样的标准中已经存在了好几年.

更新:该标准是不是对这个早在2008年明确时CSS2最后一次更新,它是在2011年的CSS 2.1定稿明确.因此,浏览器在如何处理这个问题上并不统一并不奇怪.