有人能告诉我为什么这个CSS计算函数不起作用吗？在Chrome中检查元素时，它显示“无效的属性值”。
width: calc((100vw - 14px * 2) / (270px + 11px * 2));
6个回答
221
给未来的Google搜索者：
在DevTools中显示的“无效属性值”信息可能只意味着您需要在加号、减号、除号或乘号周围添加空格。
不正确的写法（无效属性值）：
width:calc(100vh-60px) <== no spaces around minus sign
正确：
width:calc(100vh - 60px) <== white space around the minus sign
楼上提出的问题并没有这个问题，但是在搜索答案的过程中，我找到了一个解决此常见错误的资源，应该专门回答一下。
参考资料:
CSS3 calc() not working in latest chrome
https://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/
- cssyphus
6
24解决了这个问题。令人难以置信的是，一个空格对 CSS 可能产生如此巨大的影响。 - ranu
19我从未见过一种语言，操作符之间的空格如此重要。 - Luke Vo
3我遇到了这个问题，是因为我的 CSS 压缩工具删除了空格。谢谢。 - user2682863
@user2682863 你是如何解决这个问题的？我也遇到了同样的问题。ASP.NET缩小器正在删除calc表达式中的空格。 - jessewolfe
@jessewolfe 我更改了代码压缩器，这个答案帮助我找到了问题所在。 - user2682863
CSS不是一种编程语言。 - tasqyn
22
你无法使用像 px 这样的单位进行除法运算，只能使用数字。
- Stephen Thomas
2
我在代码中遇到了相同的错误信息。.war{min-height:calc(100vh-((100vh - 162.5)-300px))!important;} - Laredo
10@ Olanrewaju T：您需要在运算符周围留出空白，这样您的计算应该是这样的：.war {min-height: calc（100vh-（（100vh-162.5）-300px））！important;} - Andrew Wasson
6
当使用calc()时，不能以像素为除数，只能以无单位数字为除数。同时，被除数必须具有特定的单位，如px、em、vh、vw。
例如，如果您需要设置元素的宽度，则应使用：
一个重要的注意事项是确保在操作符之间放置空格。这篇calc()文章提供了有关该函数的进一步详细说明。
例如，如果您需要设置元素的宽度，则应使用：
width: (100px / 2); //this equals to 50px
一个重要的注意事项是确保在操作符之间放置空格。这篇calc()文章提供了有关该函数的进一步详细说明。
- Nesha Zoric
6
如@cssyphys所述，您必须在减号周围添加空格。但是，如果您正在使用ASP.NET MVC的包装器/压缩器，您会发现它会删除空格，因此会出现上述错误。
如果您正在使用普通的CSS3，则可以在CSS中使用以下表达式，不会被压缩：
width: calc((100%) - 50px);
然而，如果你正在使用LESS（和可能其他的CSS预处理器），预处理器将“优化”你的表达式并删除内部括号，结果可能会导致ASP.NET无法正常工作。要解决这个问题，可以使用LESS的“不处理”波浪线表达式：
width: calc(~"(100%) - 50px");
我不得不返回并更改一大堆calc()语句，但为了恢复我的ASP.NET压缩，这是值得的。
- jessewolfe
2
正如Stephen Thomas所回答的那样，你不能按单位除以数值。为了解决这个问题，只需将数字作为数字进行除法运算，然后通过乘以你感兴趣的单位的1个单位来确定测量单位。在您的嵌套场景中，您需要弄清楚最终需要的测量单位，以便您可以将数字相除，然后将结果分配给px或vw测量单位。
- Andrew Wasson
0
我刚刚遇到了这个错误，因为一个 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)）
- bgerth
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
width: calc((5) / (2));。 - SeinopSys