css - CSS calc() 在 Firefox 上无法正常工作

Question

div 的 CSS 块中的这段代码：

--z: calc(1082px - 100%);
--z1: calc(var(--z) * 1000);
--z2: calc(max(var(--z1) * (-1), var(--z1))); /* abs */
--z3: calc((var(--z2) + var(--z1)) / 2);
--z4: calc(min(var(--z3), 1px));
width: calc(var(--z4) * 1082);

如果 --z 为负数，则 --z4 = 1px。

如果 --z >= 0，则 --z4 = 0px。

这部分在 Chrome 和 Firefox 上运行良好。我可以观察到这样的结果：

width: var(--z4);

问题 ：

width: calc(var(--z4) * 1082);

当--z4 = 1px时，则宽度必须等于1082px，即1px * 1082。

然而，它不适用于 Firefox。它返回宽度：0px。

在 Chrome 上，它运行良好，宽度：1082px。

拜托，有人能解释一下为什么它在 Firefox 上不起作用吗？

---

编辑 ：

我在 1 行中写了公式：

width: calc(min((max(((1082px - 100%) * 1000) * (-1), ((1082px - 100%) * 1000)) + (1082px - 100%) * 1000) / 2, 1px) * 50);

添加每一块后，我检查了结果。它运行良好，除了 Firefox 上的最后一块（与使用多个变量和函数 calc() 的第一个版本相同）。

width: calc(min((max(((1082px - 100%) * 1000) * (-1), ((1082px - 100%) * 1000)) + (1082px - 100%) * 1000) / 2, 1px));

它返回 0px 或 1px。这些是预期值。

但是当添加 * 50 （或其他数字）时，它会失败（在 Firefox 上）。它返回 0px 而不是 50px (1px * 50)。

然而，在加法 + 50px 的情况下，它可以工作并返回 51px。

---

编辑 2

最后，当我乘以1000时，Firefox似乎不喜欢。当我起飞* 1000时，它运行良好。不过，我需要中和数字的小数部分。我会考虑另一种解决方案。

标签： csscss-calc

Answer 1

也许这可以帮助你。如我所见，黄色 (z2) 太大了，例如它可以是 145000 像素。看来你的公式是错误的。

document.querySelectorAll('div')
.forEach(div=>div.insertAdjacentHTML(
 'afterend',
 `<code>${div.getAttribute('style')}</code>
→ <code>${getComputedStyle(div).width}</code> computed.`
));

:root {
  --z: calc(1082px - 100%);
  --z1: calc(var(--z) * 1000);
  --z2: calc(max(var(--z1) * (-1), var(--z1)));  /* abs */
  --z3: calc((var(--z2) + var(--z1)) / 2);
  --z4: calc(min(var(--z3), 1px));
}

div {
  height: 10px;
  margin: 5px 0 0 0;
  background-color: var(--bg);
}

<div style="--bg: red; width: var(--z);"></div>
<div style="--bg: green; width: var(--z1);"></div>
<div style="--bg: yellow; width: var(--z2);"></div>
<div style="--bg: pink; width: var(--z3);"></div>
<div style="--bg: blue; width: var(--z4);"></div>