5

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

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

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

4

3 回答 3

6

根据 caniuse.com，IE 解释1ch为 0 字形的宽度，没有周围的空间。1ch与任何其他浏览器相比，这使得IE 中的时间更短。

于 2016-12-20T14:47:20.833 回答
4

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

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

普通浏览器（默认）：

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

IE11：

input[type="text"][size="10"] { width: 11.62ch }
于 2017-03-02T10:29:05.917 回答
2

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

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

规范说：

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

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

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

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

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

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

值得庆幸的是，'em' 和 'ex' 可用且一致，并且还提供相对于字体的大小。我想在这种情况下，我能给出的最好建议就是坚持下去。

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

于 2013-07-24T10:03:15.963 回答