CSS3 ch单元与IE9 +和其他浏览器不一致 [英] CSS3 ch unit inconsistent between IE9+ and other browsers

问题描述

IE9 + 版权声明以支持 ch CSS单元。根据定义，该单位等于当前字体的0（ZERO，U + 0030）字形的提前量度，或者更简单地说，字形的字符框的宽度为0。此解释似乎适用于Firefox 10+和Chrome 27+：< div style =width：10ch;>< / div> 和< div> 0000000000< / div> 具有完全相同的宽度，因为它们具有相同大小的相同字体。但在IE9 +中， ch 单位似乎意味着稍有不同。

IE9+ claims to support the ch CSS unit. By the definition, this unit is 'Equal to the advance measure of the "0" (ZERO, U+0030) glyph' of the current font, or, in simpler words, the width of the character box for the glyph for "0". This interpretation seems to be right for Firefox 10+ and Chrome 27+: <div style="width: 10ch;"></div> and <div>0000000000</div> have exactly the same width given they have the same font of the same size. But in IE9+ the ch unit seems to mean something slightly different.

这里是小提琴演示这个问题： a href =http://jsfiddle.net/CNsPg/6/ =nofollow> http://jsfiddle.net/CNsPg/6/

Here is the fiddle demonstrating this issue: http://jsfiddle.net/CNsPg/6/

IE本机的行为的逻辑是什么？还是只是一个错误？是否可以像其他浏览器一样使IE处理 ch 单位（可能有一些特定于IE的文本渲染魔术）？

What is the logic of the behavior of IE with this unit? Or is it just a bug? Is it possible to make IE treat ch unit like other browsers (probably with some IE-specific text rendering "magic")?

推荐答案

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

According to caniuse.com, IE interprets 1ch as the width of the 0 glyph, without the surrounding space. This makes 1ch shorter in IE compared to any other browser.

这篇关于CSS3 ch单元与IE9 +和其他浏览器不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！