为什么 Chrome 拒绝 @property 中的 initial-value: 2em？

2026-11-04数据小许

结论

<length> 支持 em，但 initial-value: 2em 不符合注册类型化自定义属性的要求。注册初始值必须具备“计算独立性”，而 em 依赖元素的 font-size。

可以把注册初始值改为 0px，再在使用该属性的元素上设置 --my-width: 2em。Chrome 拒绝将 2em 用作注册初始值，符合规范要求。W3C 规范：initial-value

为什么初始值不能使用 2em

syntax: "<length>" 声明了属性接受的值类型。initial-value 还需要满足一个条件：不依赖其他 CSS 属性就能转换为计算值。

例如，10px 的长度可以直接确定，1in 也可以通过固定换算关系得到长度；2em 则需要知道字体大小。因此，初始值并不限于 px。改成 rem 也不能解决问题，因为它依赖根元素的字体大小。MDN：initial-value 的取值要求

原示例使用了 syntax: "<length>"，因此不能直接删除 initial-value：缺少有效初始值会使整条注册规则无效。

如何保留 em 并设置过渡

分别声明注册初始值和元素上的实际取值：

@property --my-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.scroll-container {
  --my-width: 2em;
  transition: --my-width 200ms ease;
}

.scroll-container:hover {
  --my-width: 3em;
}

把 .scroll-container 替换为实际滚动容器的选择器，并让已有的滚动条宽度规则继续通过 var(--my-width) 读取值。0px 是注册初始值，元素上的实际声明仍然可以使用 em。

注册为 <length> 后，普通声明中的 em 会根据声明所在元素的字体大小计算为绝对长度。如果属性随后被继承，继承的是计算后的长度，不会根据子元素的字体大小重新计算。W3C 规范：计算值处理

如何判断 Firefox 中的表现

Firefox 看起来接受了代码，不能单凭这一点认定注册成功。即使无效的 @property 被忽略，普通自定义属性仍可能参与样式计算。因此，需要分别检查宽度是否能改变，以及注册后的长度值是否能连续插值。

原问题没有提供浏览器版本和完整的滚动条样式，无法确定观察到的差异具体来自哪里。先修正注册初始值，再检查已有滚动条规则是否读取了同一个属性，以及目标浏览器是否支持所用的滚动条样式方式。