爲什麼嵌套內聯元素和後續字符之間沒有字母間距？

閱讀字母間距的規格後，我明白原子內聯的運行（前內聯塊）的元素被視爲一個單個字符（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是單個字符。

來源

2013-03-01 Caleb Land

我在IE7中測試了上面的代碼，它給了我：'aememb c'，並且在IE8中它與原始文章中的相同。這聽起來似乎沒有人去實現這部分規範呢。 – 2013-03-01 18:42:36

CSS2.1對['letter-spacing']（http://www.w3.org/TR/CSS21/text.html#spacing-props）沒有太多的描述，但它確實表示[in-replace元素是*不*原子內聯]（http://www.w3.org/TR/CSS21/visuren.html#inline-boxes）。這意味着像'em'這樣的元素默認情況下是'display：inline'，而不是*原子內聯。也就是說，在你的'em'規則中聲明'display：inline-block'不管在當前的瀏覽器中都沒有區別。 – BoltClock 2013-03-01 20:37:28

也許該規範似乎沒有完全實現，因爲你評論，但我不知道。當我把在本例中的修改版本從the spec（在修改我的所有內部元素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

......它does not render according to what they state，這意味着規範的一些變化。相反，出現的規則是前面的字母的letter-spacing值決定了它後面的空格。這可能是在此基礎上聲明的從規範解釋的實現：

在元素界，兩個字符之間的總字母間距是給出最裏面的元素中呈現的是包含邊界。

但我不確定這一點。無論如何，下面什麼似乎是瀏覽器的使用規則，即信的letter-spacing值之前的確定的間距，然後解釋回答你的

是問題那麼爲什麼在emem和b之間沒有額外的2em間距？

這是因爲b前面的字母是包含在letter-spacing: normal編碼元件，其之後給出一個零寬度間距的m。我不相信基準...

對於字母間距，原子內聯（例如圖像和/或內聯塊）的每個連續運行的目的，被處理爲一個單一的字符

...與它有很大關係。這只是表明這種「原子內聯」功能作爲一個單元，並且em默認情況下不是原子內聯（see second paragraph of 9.2.2 in this spec）。因此，在this example，所述inline-block元件的width確定其中g放置，但並不表示f恰好現在是後的g，因爲整個塊被作爲一個原子單元的作用的事實。

來源

2013-03-01 20:43:01 ScottS

我認爲你是對的。在我原來的文章中，我想談論內聯塊元素，它使單個字符規則適用，但我認爲它會不必要地使問題複雜化。 – 2013-03-01 21:58:07

因此，共識是瀏覽器偏離規範，因爲該規範提供了LS，Z，Y示例所需的渲染，哪些瀏覽器不遵循，對嗎？ – 2013-03-01 22:00:32

@CalebLand：我想說的是，因爲間距的應用並沒有作爲例子，所以在規範中似乎有些東西沒有被瀏覽器所遵循。但不可否認，這個規範對我來說有些模糊，所以我可以看出爲什麼會這樣。 – ScottS 2013-03-02 02:27:17

爲什麼嵌套內聯元素和後續字符之間沒有字母間距？

回答

相關問題