为什么内联块在非破坏空间后会中断？

Question

一些HTML代码:

<p id='one'>Hello World how are you.&nbsp;<span>Entrepreneur</span></p>

<p>Hello World how are you.&nbsp;<span>Entrepreneur</span></p>

一些CSS:

#one span {
  display: inline-block;
}

p {
  font-family: Arial;
  font-size: 16px;
  width: 200px;
}

第二段表现得像我期望的那样.

然而,第一个行为不同,因为跨度是内联块.

我的问题是,为什么inline-block跨度忽略了 和span前一个词之间的断开线？

谢谢!

这里举例说明.

Answer 1

因此,看起来各个浏览器的行为不一致:

• 在IE11和最后几个版本中,我已经能够测试它,无论span是内联框还是内联块框,IE都遵循不间断空格,并且不会将其span与前一个字分开.

• 在所有其他浏览器中,行为如问题中所述.当span内联块时,不间断空格似乎被忽略; 相反,它被强制放在自己的行上并与前面的单词分开.请注意,不间断的空间仍然存在; 它出现在第一行的末尾,就在单词之后,可以通过突出显示Firefox中的行来看到.

这里的其他人给出的解释似乎相当合理:内联块的格式类似于块框,除了内联,因此这可能是它不总是与内联框行为相同的原因.但是,我没有在规范中找到任何证实这一点的内容.它也没有解释为什么IE的行为方式,或者实际上IE是表现不正确还是不同.

CSS2.1规范在9.2.2节中说明了以下内容,它非常适合上述解释:

不是内联框的内联级框(例如替换的内联级元素,内联块元素和内联表元素)称为原子内联级框,因为它们作为单个不透明框参与其内联格式化上下文.

但它没有完全描述换行符和原子内联级别框之间的相互作用,更不用说不间断空间对这种交互的影响了.所以,遗憾的是,似乎没有足够的解释任何一个浏览器的行为.

我甚至看过CSS3 Text模块,但关于换行符和原子内联的所有内容都是这样的:

• 替换元素或其他原子内联的换行行为等同于对象替换字符(U + FFFC)的换行行为.

...当我用U + FFFC尝试时,结果完全不可靠:

<p id='one'>Hello World how are you.&nbsp;<span>Entrepreneur</span></p>

<p>Hello World how are you.&nbsp;<span>Entrepreneur</span></p>

<p>Hello World how are you.&nbsp;&#xfffc;</p>

即:

• IE表现最为一致,以同样的方式打破所有三个段落.

• Firefox使用与第二段相同的方式打破线条,尊重不间断空间.

• Chrome甚至不会尝试渲染角色.

也许我只是误解了CSS3 Text模块的引用,也许浏览器没有正确实现某些控制字符,我不能肯定地说.但是,如果有的话,我开始怀疑这种行为是否真的在任何CSS规范中定义.