html - IE 上的长度单位 ch 与 em

Question

我有 font-family: monospace; 和 white-space: pre; 的文本，我还想设置最大宽度以适合文本(这样背景颜色不会超出文本右侧的要求)。

文本的最大宽度为 80 个等宽字符，因此我设置了 max-width :82ch;。这在 Firefox 和 Chrome 上完全按照预期工作，但在 IE 上它根本不玩球并且在大约 60 个字符处换行。通过检查，我似乎需要将 max-width: 95ch; 设置为在 IE 上没有换行，但这会加宽 Firefox 和 Chrome 的显示。

在研究这个过程中，我遇到了 The Lengths of CSS ch 长度单位的哪些状态:-

Notable browser support issues: IE 9+, no Android default browser

我同意!

我尝试使用 em 作为我的长度单位，因为在等宽字体中，我的解释是 em 和 ch 是相似的(如果不一样的话)。

来自 Wikipedia: Em (typography) :-

The name em was originally a reference to the width of the capital M in the typeface and size being used

我的假设是大写字母 M 与等宽字体中的所有字符大小相同(这就是等宽字体的意义所在)，因此 em 和 ch 将是一样。

我也遇到了CSS Units它有一个表格显示对 ch 的支持只在 IE9 中出现，而对 em 的支持在 IE3 中出现，所以我认为这可能意味着他们有更多机会让它工作!

我发现它们在所有浏览器中至少是一致的，但是 max-width: 82em; 比我的 80 个等宽字符宽 WAAAY。通过检查，我似乎需要 max-width: 51em; 才能正确匹配。

我检查了三个主要浏览器中 font-size 和 max-width 的“计算”值，发现它们都是相同的。他们都计算了 font-size:13px; 和 max-width:663px;。由于 max-width 设置为 51em 这使得 1em = 13px;

我不明白为什么等宽字体中的 80 个字符不占用 80 x 13 像素的宽度？

这背后是不是有什么我没看懂的原因，或者是三大浏览器似乎无法就任何事情达成一致，实际上一直在做错事？

问题:为所有浏览器设置字符宽度的正确方法是什么？

我担心我的问题可能没有好的答案。我刚找到 this question它准确描述了我在 2009 年想做的事情，答案(最近添加)是使用 ch。不幸的是，ch 在 IE 中无法正常工作，即使在 IE11 中也是如此。

Answer 1

任何不使用 ch 长度单位的解决方案都会破坏 Firefox 和 Chrome 的一些完美的 CSS，只是为了 IE 的好处。

以下解决方案似乎是一个很好的折衷方案，因为它适用于带有一些替代 CSS 的 IE10+。 Microsoft 不再支持 IE9，因此也不会过分支持它，尽管有条件的注释或其他 hack 是可能的。

.mybox {
    font-family:monospace;
    white-space:pre;
    max-width:82ch;
    width:82ch;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .mybox {
        max-width:95ch;
        width:95ch;
    }
}