CSS3 ch unit inconsistent between IE9+ and other browsers
css, internet-explorer-10, internet-explorer-9
Solution
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.
Problem
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. Here is the fiddle demonstrating this issue: http://jsfiddle.net/CNsPg/6/ 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")?