<p id='one'>Hello World how are you. <span>Entrepreneur</span></p> <p>Hello World how are you. <span>Entrepreneur</span></p>
一些CSS:
#one span { display: inline-block; } p { font-family: Arial; font-size: 16px; width: 200px; }
第二段表现如我所料。
然而,第一个行为是不同的,因为跨度是一个内联块。
我的问题是,为什么内嵌块跨度忽略& nbsp;并跨越和前一个词之间的分界线?
谢谢!
示例小提琴here。
解决方法
>在IE11和最后几个版本中,我已经能够测试这一点,无论跨度是一个内嵌框还是一个内嵌框,IE都遵循无休止空格,并不会将span与前一个单词分开。
>在所有其他浏览器中,行为如问题所述。当跨度是内嵌块时,无休止空间似乎被忽略;相反,它被强制到自己的线上,与之前的单词分离。请注意,无休止的空间依然存在;它出现在第一行的末尾,就在字之后,可以通过在Firefox中突出显示该行来看到。
一些其他人在这里给出的解释似乎相当的声音:一个内联块被格式化为一个块框,除了内置,这可能是一个原因,它不总是与内联框一样的行为。但是,我无法在规范中找到任何证实这一点的内容。 IE也不会解释为什么IE的行为方式,或者IE的行为是不正确的还是不同的。
CSS2.1规范在section 9.2.2中说明了以下说明:
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.
但是它并没有完全描述换行符和原子内联级别框之间的相互作用,更不用说无间断空间对此交互有影响。所以,不幸的是,似乎没有足够的解释任何一个浏览器的行为。
我甚至在CSS3文本模块中看到,但是对于换行符和原子内联来说,它必须说的是this:
- The line breaking behavior of a replaced element or other atomic inline is equivalent to that of the Object Replacement Character (U+FFFC).
…当我用U FFFC,the results are completely unreliable:
<p id='one'>Hello World how are you. <span>Entrepreneur</span></p> <p>Hello World how are you. <span>Entrepreneur</span></p> <p>Hello World how are you. </p>
即:
> IE行为最为一致,以同样的方式打破所有三个段落。
> Firefox以与第二段相同的方式打破字符串,尊重无休止空间。
> Chrome甚至不会尝试渲染角色。
也许我只是误解了CSS3文本模块的引用,也许浏览器没有正确地执行某些控制字符,我不能肯定地说。但是,如果有什么,我开始怀疑这个行为是否真的在任何CSS规范中定义。