css calc 无效的属性值

Posted 2023-03-06

【中文标题】css calc 无效的属性值

【英文标题】：css calc invalid property value

【发布时间】：2016-02-28 19:16:33

【问题描述】：

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

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

【问题讨论】：

这太疯狂了。这不是使用 calc 属性的方法，它不适用于这么多的计算

Chrome 也拒绝width: calc((5) / (2));

@Gaurav Aggarwal：为什么不

相关：***.com/a/53364752/8620333

【参考方案1】：

对于未来的谷歌员工：

DevTools 中无用的“无效属性值”消息可能只是意味着您的 + - / * 运算符周围需要空白。

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

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

正确：

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

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

参考资料：

CSS3 calc() not working in latest chrome

https://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/

【讨论】：

这解决了问题。令人难以置信的是，空格如何对 CSS 产生如此巨大的影响。

我这辈子从未见过一种语言中运算符之间的空格很重要...

我花了 2 个小时调试我的代码，直到找到这篇文章

我遇到了这个问题，因为我的 css minifier 正在删除空格，谢谢

??????@cssyphus

【参考方案2】：

你不能用px这样的单位来除，只能用numbers。

【讨论】：

我对代码 .warmin-height:calc(100vh-((100vh - 162.5)-300px))!important;

有相同的错误消息

@Olanrewaju T：您需要在运算符周围留有空白，因此您的计算应如下所示：.warmin-height:calc(100vh - ((100vh - 162.5) - 300px)) !important;

【参考方案3】：

使用 calc() 时，您不能除以像素，您只能除以无单位数。此外，您要划分的数字必须具有一定的单位，如 px、em、vh、vw。

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

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

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

【参考方案4】：

正如斯蒂芬托马斯所回答的那样，您不能按单位除。为了解决这个问题，只需将数字除以数字，然后通过将结果乘以您感兴趣的单位的 1 个单位来分配测量单位。在您的嵌套场景中，您需要弄清楚您的测量单位最后是这样，以便您可以将数字相除，然后将结果分配给 px 或 vw 测量单位。

【参考方案5】：

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

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

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

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

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

我不得不返回并更改一堆 calc() 语句，但为了找回我的 ASP.NET 缩小版非常值得。

【参考方案6】：

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

错误：

$card-border-width: 0;

这最终引发了 Chrome 的消息 Invalid property value 以响应 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)）