IE浏览器ch单位兼容性问题：等宽文本max-width设置异常咨询

这确实是IE对ch单位的经典兼容性坑——现代浏览器里ch是基于 monospace 字体中"0"字符的宽度来计算的，但IE的实现和标准有偏差，导致相同ch值下能容纳的字符数更少。给你几个实用的解决方案：

方案1：IE条件注释单独适配 #

利用IE独有的条件注释，给IE单独设置max-width，现代浏览器会自动忽略这段代码：

/* 针对Chrome、Firefox等现代浏览器 */
.monospace-block {
  font-family: monospace;
  white-space: pre;
  max-width: 82ch;
}

然后在HTML的<head>里添加IE专属样式：

<!--[if IE]>
<style>
.monospace-block {
  max-width: 95ch;
}
</style>
<![endif]-->

这个方法最直接，完全不会影响其他浏览器的正常表现。

方案2：用@supports做特性检测降级 #

如果不想在HTML里加条件注释，可以用CSS的@supports规则，针对不支持CSS变量的浏览器（也就是IE）做降级处理：

.monospace-block {
  font-family: monospace;
  white-space: pre;
  max-width: 82ch; /* 现代浏览器生效 */
}

/* 仅对不支持CSS变量的浏览器生效（IE 10/11等） */
@supports not (--css-variable: 0) {
  .monospace-block {
    max-width: 95ch;
  }
}

这个方案更符合现代CSS的写法，不需要额外的HTML代码。

方案3：替换为em或固定像素（备选） #

如果不想依赖ch单位，可以根据 monospace 字体的字符宽度换算成em或像素。比如假设你的 monospace 字体1em等于1个字符宽度，那么80个字符可以设max-width: 80em，然后给IE调整为95em：

.monospace-block {
  font-family: monospace;
  white-space: pre;
  max-width: 80em;
}

@supports not (--css-variable: 0) {
  .monospace-block {
    max-width: 95em;
  }
}

不过这个方法需要确保字体的1em严格等于字符宽度，否则可能出现偏差，所以更推荐前两个方案。

为什么会出现这个问题？ #

ch单位的标准定义是"当前字体中0字符的宽度"，但IE对这个单位的计算存在偏差——它可能错误地使用了其他字符的宽度，或者字体渲染引擎的差异导致实际字符宽度和ch的映射不匹配，所以需要更大的max-width值才能容纳80个等宽字符。

内容的提问来源于stack exchange，提问作者Morag Hughson