Question

有人可以告诉我为什么这个CSS calc函数不起作用？当我检查Chrome上的元素时，它会显示“无效的属性值”。

width: calc((100vw - 14px * 2) / (270px + 11px * 2));

Answer 1

未来的googlers：

无用的＆＃34;无效的属性值＆＃34; DevTools中的消息可能只是意味着你的+ - / *运算符周围需要空格。

不正确（无效的属性值）：

width:calc(100vh-60px)  <== no spaces around minus sign

正确：

width:calc(100vh - 60px) <== white space around the minus sign

上面的OP的问题没有这个问题，但是当谷歌搜索这个错误消息的答案时，这是我找到的第一个资源，所以它应该有一个专门针对这个常见错误的答案。

参考文献：

Answer 2

您不能按px之类的单位除以numbers。

Answer 3

使用calc（）时，不能按像素划分，只能除以无单位数。此外，您要分割的数字必须具有某个单位，如px，em，vh，vw。

例如，如果您需要设置元素的宽度，则应使用：

width: (100px / 2); //this equals to 50px

一个重要的注意事项是确保在操作员标志之间放置空格。这个calc() article提供了有关该功能的进一步详细说明。

Answer 4

斯蒂芬托马斯回答说，你不能按单位划分。要解决这个问题，只需将数字除以数字，然后通过将结果乘以您感兴趣的单位的1个单位来指定计量单位。在嵌套方案中，您需要弄清楚什么是最后你想要的测量单位，你可以将数字除以然后将结果分配给px或vw测量单位。

Answer 5

正如@cssyphys 上面提到的，你的减号周围必须有空格。但是，如果您使用的是 ASP.NET MVC 的捆绑器/缩小器，您会发现它删除了空格，因此您会收到所指出的错误。

如果您使用纯 CSS3，以下表达式可以在 CSS 中使用并且不会被缩小：

width: calc((100%) - 50px);

但是，如果您使用 LESS（也许还有其他 CSS 预处理器？），预处理器将“优化”您的表达式并撕掉您的内部括号，再次导致 ASP.NET 出现问题。要解决这个问题，请使用 LESS 的“不处理”波浪号表达式：

width: calc(~"(100%) - 50px");

我不得不回去更改一堆 calc() 语句，但为了取回我的 ASP.NET 缩小，这是值得的。

Answer 6

我刚遇到此错误，因为一个SCSS变量设置为零：

错误：

$card-border-width: 0;

这最终激怒了Chrome的消息无效的属性值，以回应CSS结果border-radius: 0 0 calc(0.25rem - 0) calc(0.25rem - 0)。

右：

$card-border-width: 0rem;

（给予border-radius: 0 0 calc(0.25rem - 0rem) calc(0.25rem - 0rem)）