内联Max-Width CSS（含自定义变量的Calc）触发W3C解析错误

问题根源 #

W3C验证器的CSS解析规则对内联样式中**嵌套在calc()括号内的自定义属性（CSS变量）**写法有严格限制，即便语法符合现代CSS标准，也可能触发解析错误。

纯CSS解决方案 #

方案1：迁移样式到内部/外部样式表（推荐） #

把内联样式的逻辑转移到<style>标签或外部CSS文件，彻底规避内联样式的解析限制：

/* 先确保变量已在全局定义 */
:root {
  --100vh: 100vh;
  /* 若需适配移动端动态视口，可替换为：--100vh: 100dvh; */
}

/* 定义类样式 */
.content-container {
  max-width: calc( (var(--100vh) - 80px) * 0.847 );
}

对应的HTML修改为：

<div class="content-container">some content</div>

这种写法完全符合W3C标准，验证器不会报错，还能提升样式的复用性。

方案2：调整内联样式语法（需保留内联时使用） #

如果必须保留内联样式，调整两点语法细节即可通过验证：

1. 给小数点数值补上前导零（把.847改为0.847）
2. 确保运算符与变量/数值间保留空格

修改后的内联代码：

<div style="max-width: calc( (var(--100vh) - 80px) * 0.847 );">some content</div>

注意：前提是--100vh变量已经在父元素或:root中正确定义。

内容的提问来源于stack exchange，提问作者Robin Dean