CSS calc() 在 Firefox 上无法正常工作答案

【问题标题】：CSS calc() doesn't work as expected on FirefoxCSS calc() 在 Firefox 上无法正常工作
【发布时间】：2021-12-24 01:20:41
【问题描述】：

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 时，它运行良好。不过，我需要中和数字的小数部分。我会考虑另一种解决方案。

【问题讨论】：

calc 对空格很敏感，请尝试一下。
@serraosays 您是否看到宽度上的任何空白错误： calc(var(--z4) * 1082); ?此行上面的代码在 Firefox 中运行良好。
@Sam，尝试删除+ 和* 操作周围的空格。
@Azu 我试过了，但不能解决问题。我还检查了所有线条，它们都运行良好，除了最后一条，即关于宽度的一条。我检查了空白。
浏览器不喜欢你发现的太多嵌套的 calc()。顺便说一句，为什么不使用一个公式而不是所有这些公式？

标签： css css-calc

【解决方案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>

【讨论】：

谢谢。但这不是问题。浏览器的价值如此之大。
再次检查您的公式。 (z4) 在窄浏览器上为 1px，在大型浏览器上为 0。
0px 或 z4 的 1px 是预期值。