IE9+ 和其他浏览器的 CSS3 ch 单位不一致

Question

IE9+ claims 支持ch CSS unit。根据定义，这个单位是'等于当前字体的“0”（零，U+0030）字形的提前量度'，或者更简单地说，the width of the character box for the glyph for “0”。这种解释似乎适用于 Firefox 10+ 和 Chrome 27+：<div style="width: 10ch;"></div> 和 <div>0000000000</div> 具有完全相同的宽度，因为它们具有相同大小的相同字体。但在 IE9+ 中，ch 单位的含义似乎略有不同。

这是演示此问题的小提琴：http://jsfiddle.net/CNsPg/6/

这个单元的IE行为的逻辑是什么？或者它只是一个错误？是否可以让 IE 像其他浏览器一样对待 ch 单元（可能带有一些 IE 特定的文本渲染“魔术”）？

Answer 1

看看小提琴，这是一个对规范有不同解释的有趣案例。

规范本身有点……呃……简短；我可以看到两种解释的空间。

规范说：

ch 单位
等于在用于渲染它的字体中找到的“0”（零，U+0030）字形的提前量度。

所以“ch”是“0”的宽度。规范中没有回答的问题是是否应该包括字符周围的间距：

• 是否应该与'em'单位一致（即'm'的宽度，包括字体间距）？

• 还是应该与“ex”一致，即“x”字符的高度（不考虑任何间距；即只是实际字形）？

如果我正在编写浏览器，我想我知道我会选择哪一个，但正如我所说，鉴于规范中缺乏明确性，我可以看到这两种情况的论据。

我想，面对这种模棱两可的情况，并且浏览器之间有两种明显不同的实现，唯一明智的选择是在达成更好的共识之前根本不使用“ch”单元。

谢天谢地，'em' 和 'ex' 可用且一致，并且还提供与字体相关的大小。我想在这种情况下，我能给出的最好建议就是坚持下去。

我能想到的唯一解决方法是使用默认为零字母间距的自定义字体。我的想法是，这应该消除解释之间的歧义，但会在某种程度上弄乱字体渲染的其他方面。我猜你可以手动设置字母间距，但你可能还有其他问题。老实说，这不是我真正建议尝试的解决方案。

Answer 2

According to caniuse.com，IE 将1ch 解释为 0 字形的宽度，没有周围的空间。这使得1ch 在 IE 中比任何其他浏览器都短。

Answer 3

您必须创建一个特定于 IE 的 CSS，它覆盖所有规则，包括 ch 单位，并将它们乘以 1.162 以获得等宽字体。

此值可能会随其他字体而改变，因此您可能必须通过测量 100x0 和宽度为 100ch 的 div 的实际宽度（以像素为单位）来计算比率。

普通浏览器（默认）：

input[type="text"][size="10"] { width: 10ch }

IE11：

input[type="text"][size="10"] { width: 11.62ch }