html - @property 不接受 em 单位的长度

Question

注意：由于支持表较差，MRE 可能无法在某些浏览器中运行。

@property --width1 {
  syntax: '<length>';
  inherits: false;
  initial-value: 20em;
}

@property --width2 {
  syntax: '<length>';
  inherits: false;
  initial-value: 200px;
}

div {
  margin: 30px;
  height: 30px;
  background: black;
  color: white;
  text-align: center;
}

#div1 { width: var(--width1); }
#div2 { width: 20em;          }
#div3 { width: var(--width2); }
#div4 { width: 200px;         }

<div id="div1">var(--width1) = 20em</div>
<div id="div2">20em</div>
<div id="div3">var(--width2) = 200px</div>
<div id="div4">200px</div>

在px中，宽度与预期div3相同。div4

在em,div2的宽度符合预期。但是在 中div1，几乎就像var(--width1)被忽略并且宽度被设置为auto。有什么方法可以var(--width1)按预期工作吗？

Answer 1

从规范：

initial-value必须是计算独立的。

和

如果仅使用元素上的属性值和 CSS 无法更改的“全局”信息将属性值转换为计算值，则该属性值在计算上是独立的。

在您的情况下，em取决于font-size值，因此它不是计算独立的