6

在阅读了字母间距规范后，我了解到原子内联（前内联块）元素的运行被视为单个字符（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和之间没有额外的 2em 间距b？由于emem是单个字符。

4

1 回答 1

2

也许您评论的规范似乎没有完全实施，但我不确定。当我从规范中放入示例的修改版本时（修改为我制作了所有内部元素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 的第二段）。所以在这个例子width中，inline-block元素的 决定了的放置位置，而不是现在恰好在之后的g事实，因为整个块作为一个原子单元运行。fg

于 2013-03-01T20:43:01.577 回答