为什么嵌套的内联元素和后面的字符之间没有字母间距？

Question

阅读了字母间距规范之后，我了解到原子内联（例如，内联块）元素的运行被视为单个字符（ http://www.w3.org/TR/css3-text/#letter-spacing ）：

出于字母间距的目的，原子内联的每次连续运行（例如图像和/或内联块）都被视为单个字符。

在我测试过的所有浏览器（Chrome，Safari，Firefox，IE 9 + 10）中，它似乎都无法正常工作。

以下代码（ http://codepen.io/caleb/pen/CqDfK ）：

<style>
    div { letter-spacing: 2em; }
    em { letter-spacing: normal; }
</style>
<div>
    a<em>em</em><em>em</em>bc
</div>

呈现为：

a    ememb    c

有没有理由在emem和b之间没有额外的2em间距？ 由于emem是单个字符。

Answer 1

正如您所评论的那样，该规范似乎并未完全实现，但我不确定。 当我从规范中放入示例的修改版本时（修改后，我制作了所有内部元素em并更改了大小以更好地查看；下面引号中的更改在方括号中给出）...

例如，给定标记

 <P>a<LS>b<Z>cd</Z><Y>ef</Y></LS>g</P> 

和样式表

 LS [em] { letter-spacing: 1em; } Z [em > em] { letter-spacing: 0.3em; [made 3em in example] } Y [em > em + em] { letter-spacing: 0.4em; [made 6em in example]} 

间距将是

 a[0]b[1em]c[0.3em]d[1em]e[0.4em]f[0]g 

...它并没有按照他们所说的进行渲染 ，这意味着对规范有一些变化。 取而代之的是， 似乎遵循的规则是前一个字母的letter-spacing值确定了其后的空格。 这可能是基于规范对以下语句的解释的实现：

在元素边界处，两个字符之间的总字母间距由包含边界的最里面的元素给定并呈现在其中。

但是我不确定。 无论如何，下面这似乎是浏览器的使用规则，即前一字母的letter-spacing值确定的间距，然后解释回答你的问题

有没有理由在Emem和b之间没有额外的2em间距？

这是因为前面的字母b是m包含在letter-spacing: normal编码元件，其给出一个零宽度后间距。 我不相信这个参考...

出于字母间距的目的，原子内联的每次连续运行（例如图像和/或内联块）都被视为一个字符

...与它有很大关系。 这仅表示此类“原子内联”是一个单元，默认情况下， em不是原子内联（ 请参见本规范的9.2.2的第二段 ）。 因此，在此示例中 ， inline-block元素的width决定了g的放置位置，而不是f恰好位于g 之后的事实，因为整个块都充当原子单元。