字母间距对元素宽度的奇怪影响

Question

我会假设在两个字符跨度上将字母间距设置为 -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 会使宽度减少 2px 而不是 1。

如果在您尝试将其与 text-align: center 对齐时，它不会导致字母间距为 -1px 的文本略微偏离中心，那么这可能不太重要。

CSS 规范似乎清楚地表明，字母间距应该会影响 个字母之间的间距。然而，似乎至少在 Chrome 中，一些概念起点和文本的第一个字符之间的间距也被压缩了。

对此有什么想法或想法吗？ IE 10 表现出相同的行为。一个错误？还是对规范的误读？

Answer 1

行为

我同意规范相当明确地说明了这一点。引用this page：

字母间距不得应用于开头或结尾 行。

但是，Win 7 上的 this fiddle 向我显示，在 Chrome、IE9 和 Firefox 上，所有在最后一个字母之后应用的像素减少了（Firefox 显示我从一个开始在与边界的间隙中开始的像素较少），这似乎违反了它没有应用于行尾。结果是字符串中每个字符的总宽度似乎都减少了 1px。

因此，它似乎在任何浏览器中都无法正常工作，letter-spacing 是否为 instead a positive number 也无关紧要。

可能是“最佳”解决方法

将padding-right: 1px 与letter-spacing: -1px 添加到span 以抵消as seen in this fiddle 的问题。

可选解决方法：:after 伪元素

在span 和letter-spacing: -1px 上输入以下as seen in this fiddle：

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

最后的想法

上述任何一种解决方案可能会或可能不会帮助解决 text-align: center 计算中的差异，因为这似乎部分取决于基于显示宽度的中心 1px 舍入，如拉伸this fiddle) 的宽度。