css - 为什么在等式中使用 0 时 css-calc() 不起作用？

Question

我正在使用 calc() 来设置类中的 top: 属性。我需要一些帮助来理解 calc() 是如何使用的——我认为两个方程式应该有相同的结果，但事实并非如此。 (上面的方程式不实用，我只是想调试一个更大的问题并注意到这两个没有相同的结果)

calc(-10px + ((1 - 1) * 0));

calc(-10px);

Answer 1

第一个等式无效，因为它会导致 calc(-10px + 0)

Note: Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in calc(). That is, width: calc(0 + 5px); is invalid, even though both width: 0; and width: 5px; are valid. ^ref

如果结果不为零，您将陷入此境:

At + or -, check that both sides have the same type, or that one side is a <number> and the other is an <integer>. If both sides are the same type, resolve to that type. If one side is a <number> and the other is an <integer>, resolve to <number>.

自 10px + 5 以来，最后一个更合乎逻辑。没有意义我们可能会认为 10px + 0就是10px但对于浏览器来说不是。

相关问题:Why doesn't min() (or max()) work with unitless 0?