The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS IE : 'ch' unit inconsistencies.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #207205

    I’m struggling with the ‘ch’ unit in Internet Explorer. The issue is explained clearly on Stackoverflow (, but no solution has been posted.

    Basically, IE doesn’t calculate the ‘ch’ unit value like other browsers. IE doesn’t include the spacing around the character in the calculation. IMHO, this is a bit stupid because if I said the width of a


    div> is 10ch, I expect to be able to put 10 characters in it without any wrapping (I’m using monospace font). Chrome and Firefox works correctly.

    Anyone can help me with this one please (I’m not a CSS expert)?

    Thank you in advance.


    Any reason why you’re using ch instead of em or px?

    Since Internet Explorer doesn’t do well with ch, you could try using a stylesheet specifically for Internet Explorer and use em’s or pixels.



    Yes. I build a site exclusively using fixed size font (classic/techno/old school… looking site). It has be be 80 characters wide centered in the browser. I can’t use pixels units because it doesn’t play well with fixed sized font (how many pixel is 80 characters exactly?). Correct me if I’m wrong. ‘Em’ doesn’t represent the width of a character but its height. 80 em <> 80 ch.


    From this article by Eric Meyer:

    ch unit: Equal to the advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it.

    There in the comments by Tab Atkins:

    There is a difference – monospace fonts (of which braille fonts are a subset) all have the quality that their character widths are equal, but the ratio of character width to em box is not consistent between all such fonts. The ch unit lets you ignore the ratio and just use the width directly, so you know that exactly 40 characters will fit in a “width: 40ch;” box.

    Which makes me think that when you use a specific mono-space webfont with @font-face you can get around this problem with setting a class on the html- or body-tag only for IE:

    <!--[if IE ]>
       <body class="ie">
    <!--[if !IE]>-->
    @font-face {
    /* font-face declaration stuff */
    .test { 
      font: 14px/1.5 'webfont-monospace', monospace;
      width: 10ch; 
    .ie .test {
      box-sizing: content-box; /* maybe */
      width: 10em; /* or whatever number fits */
      padding-left: 1em; /* maybe */
      padding-right: 1em;

    I tried your fix but the result was that font was smaller on IE than other browsers. So what I did is just use a larger ‘ch’ number for IE (92ch instead of 80ch). Other browsers use 80ch.

    Thank you all for your help :)

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.