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は1文字なので。

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値がそれに続くスペースを決定するというものです。これは、仕様からのこのステートメントの解釈に基づく実装である可能性があります。

要素の境界では、2つの文字間の合計文字間隔は、境界を含む最も内側の要素によって与えられ、その中にレンダリングされます 。

しかし、私にはわかりません。とにかく、ブラウザが使用しているルールのように見えるものに従って、前の文字のletter-spacing値が間隔を決定し、それがあなたの質問への答えを説明します

ememとbの間に追加の2emの間隔がない理由はありますか？

これは、前の文字bがコード化されmた要素に含まれているためです。これにより、後letter-spacing: normalの幅の間隔がゼロになります。私は参照を信じていません...

文字間隔の目的で、アトミックインライン（画像やインラインブロックなど）の連続する各実行は、単一の文字として扱われます

...それと多くの関係があります。これは、そのような「アトミックインライン」がユニットとして機能し、emデフォルトではアトミックインラインではないことを示しています（この仕様の9.2.2の2番目の段落を参照）。したがって、この例では、ブロック全体がアトミックユニットとして機能しているため、要素のwidthofが、が配置される場所を決定します。これは、が起こったという事実ではありません。inline-blockgfg

于 2013-03-01T20:43:01.577 に答える