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长度单位的状态： -

值得关注的浏览器支持问题： IE 9+，没有Android默认浏览器

我同意！

我尝试使用em作为我的长度单位，因为在等宽字体中，我的解释是em和ch类似（如果不相同）。

来自Wikipedia: Em (typography)： -

名称 em 最初是对使用的字体和大小的大写 M 宽度的引用

我的假设是，大写M的大小与等宽字体中的所有字符相同（这是等宽的点），因此em和ch将是相同的

我还遇到了CSS Units，其中有一个表格显示对ch的支持仅在IE9中进行，而对em的支持仅在IE3中进行，所以我认为这可能意味着他们有更多机会让它发挥作用！

我发现它们在所有浏览器中至少是一致的，但max-width: 82em;比我的80个等宽字符更宽广。通过检查，我似乎需要max-width: 51em;来做出正确的拟合。

我已经检查了＆＃34;计算＆＃34;在三个主要浏览器中font-size和max-width的值，发现它们都是相同的。他们都计算了font-size:13px;和max-width:663px;。由于max-width设置为51em，因此1em = 13px;

我不明白为什么等宽字体中的80个字符的宽度不超过80 x 13px？

这背后是否有一些原因让我无法理解，或者三个主要的浏览器似乎无法就任何事情达成一致，实际上一直做错了什么？

问题：在所有浏览器上使用的多个字符设置宽度的正确方法是什么？

我担心我的问题可能没有好的答案。我刚刚找到了this question，其中描述了我想要在2009年做什么，答案（最近添加）是使用ch。遗憾的是ch在IE中无法正常工作，即使在IE11也是如此。

Answer 1

任何远离使用ch长度单位的解决方案都会破坏Firefox和Chrome的一些非常好的CSS，只是为了IE的利益。

以下解决方案似乎是一个很好的折衷方案，因为它适用于IE10 +和一些备用CSS。 IE9在微软的支持下被取消了，所以虽然可以通过条件评论或其他黑客攻击，但也不会支持IE9。

.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;
    }
}

Answer 2

em指的是字体的 em-square ，ch指向0字符的 advance width 字体。对于任何给定的字体，这将是固定的比率，但通常不是= 1.例如，Windows上的Courier New的比率为1229/2048。

请注意，当您将font-family指定为＆＃34; monospace＆＃34;不同操作系统上的不同浏览器将使用不同的字体用于＆＃34; monospace＆＃34;，它们可能具有不同的提前宽度与em-square比率。

IE上的长度单位ch vs em

2 个答案: