2

2 文字のスパンで letter-spacing を -1px に設定すると、その幅が 1px 縮小されると想定していました。ただし、Chrome では以下を参照してください。

span.style.fontSize=48
48
span.textContent="99"
"99"
span.style.letterSpacing=0
0
span.offsetWidth
16
span.style.letterSpacing="-1px"
"-1px"
span.offsetWidth
14

letter-spacing を -1px に設定すると、幅が 1 ピクセルではなく 2 ピクセル減少しました。

text-align: center で配置しようとしたときに、letter-spacing -1px のテキストが中心からわずかにずれることがない場合、これはそれほど重要ではない可能性があります。

CSS 仕様は、文字間隔が文字間の間隔に影響を与えるはずであると明確に述べているようです。ただし、少なくとも Chrome では、概念的な開始点とテキストの最初の文字の間のスペースも圧縮されているようです。

これに関するアイデアや考えはありますか？IE 10 は同じ動作を示します。バグ？それとも仕様の読み間違い？

4

1 に答える 1

3

振る舞い

仕様がこれをかなり明確に述べていることに同意します。このページを引用するには：

文字間隔は、行頭または行末に適用してはなりません。

ただし、 Win 7 でのこのフィドルは、Chrome、IE9、および Firefox ではすべて、最後の文字の後に 1 つ少ないピクセルを適用していることを示しています (Firefox は、境界線とのギャップで開始するために 1 つ少ないピクセルから開始するように私に示しています）、これは行末に適用されていないことに違反しているようです。その結果、すべてが文字列内の文字ごとに合計幅を 1px 縮小しているように見えます。

そのため、どのブラウザーでも正常に機能するようには見えず、 が正の数値であるかどうかも問題ではありletter-spacingません。

おそらく「最善の」回避策

この fiddle に見られるように、 withに追加padding-right: 1pxして問題を相殺します。spanletter-spacing: -1px

オプションの回避策::after疑似要素

このフィドルに見られるspanように、以下をletter-spacing: -1px入れてください：

span:after {content:''; display: inline-block; width: 1px;}

最終的な考え

上記のいずれのソリューションも、計算の違いに役立つ場合とそうでない場合があります。これは、このフィドルtext-align: centerの幅を広げたときに見られるように、ディスプレイの幅に基づいて中央の 1 ピクセルの丸めに部分的に依存しているように見えるためです) 。

于 2012-08-04T19:56:22.777 に答える