在现代浏览器中，内联元素在标记结束之前不会折叠空白？

时间：2014-12-30 11:07:55

标签： css whitespace

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

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

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

在旧版浏览器中呈现

m

在现代浏览器中呈现

m

  • BEFORE Bar有两个空格，它们会折叠成一个单独的空格，显示为白色
  • 酒吧后面有两个空格，它们会折叠成一个单独的空格，显示为红色

为什么会出现这种差异？为什么它与几个月前的工作方式有所不同？

是否有一个特定的规格/点，渲染发生了变化？我原本期望它在旧版浏览器中的运作方式。或者这是一个错误？

1 个答案:

答案 0 :(得分：10)

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

  

如果＆＃39; white-space＆＃39;设置为＆＃39; normal＆＃39;，＆＃39; nowrap＆＃39;或＆＃39; pre-line＆＃39;

     
      
  1. 每   标签（U + 0009）转换为空格（U + 0020）
    2.   
  2. 任何空间（U + 0020）   跟随另一个空格（U + 0020） - 甚至是内联之前的空格，如果   那个空间也有“白色空间”。设置为＆＃39; normal＆＃39;，＆＃39; nowrap＆＃39;要么   ＆＃39;预线＆＃39; - 被删除。
    3.   

您所看到的行为因此是完全正确的：所有空格都是从后向前折叠的，因此前面的空格不是红色（它折叠到内联之前的空格中）和尾随一个是（当其他空间陷入其中时）。

我不知道哪些传统浏览器＆＃39;你指的是这可能是他们的引擎中的错误修正，因为这已经在这样的标准中存在了好几年。

更新：上次更新CSS2时标准为not explicit on this back in 2008，was explicit in the 2011 CSS 2.1 final drafts。因此，浏览器在如何处理这一问题方面并不统一并不奇怪。

相关问题
最新问题