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

Posted 2023-03-06

【中文标题】IE9+ 和其他浏览器的 CSS3 ch 单位不一致

【英文标题】：CSS3 ch unit inconsistent between IE9+ and other browsers

【发布时间】：2013-07-23 10:26:02

【问题描述】：

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 特定的文本渲染“魔术”）？

【参考方案1】：

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

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

规范说：

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

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

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

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

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

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

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

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

【讨论】：

CSS 没有将 'em' 定义为“'m' 的宽度，包括字体间距”。这是传统的排版定义。 CSS 将 'em' 定义为 font-size 等的计算值。

在我看来，“advance measure”（提前宽度）是一种定义明确的字体metric，以及x-height。前进宽度seems to be TTF 字体的强制部分。我想不应该有这样的歧义。

嗯，是的，你是对的。这可能足以澄清它。 :-/

【参考方案2】：

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

【参考方案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 

【讨论】：

我想这个常量应该是字体特定的？

是的。这是用于等宽字体。我试过 Arial、Comic Sans，比例不一样。