css - 跨度中的内联块字母之间的 Firefox 间隙

Question

见演示：http: //jsbin.com/evesey/41/edit

每个字母都在一个span元素中，整个句子与输入字段重叠，以显示差异。这仅在 Firefox 中引起，并且仅在spans设置为inline-block. 他们一定是inline-block。我尝试使用，letter-spacing但是当文本更改为其他内容时，这不是一个好的解决方案。

有没有办法解决这个问题？恐怕这可能只是 Firefox 渲染内联块中的一个无法解决的错误......

Answer 1

好的，经过深入调查，我了解到 Firefox 在输入字段上应用了 Kernnig，但不是在单独的字母上，spans而 Chrome 根本不应用任何字距调整，因此呈现完美的文本匹配。我看到这是一个 Chrome 错误，默认情况下不调整字距并不是那么明智的恕我直言。

\u200b通过在打印到输入字段的每个字符之后添加一个零宽度空格字符，我设法以“hacky”方式删除了强制字距调整。

更新：似乎上述技巧仍在发生字距调整，只是“字距缩小”较少。不是很好。