CSS3 calc(100%-88px) 在 Chrome 中不起作用

Question

我注意到我使用 CSS3 calc() 用作 width 的单元在最新版本的 Chrome 中不起作用。

在 Chrome 开发者工具中，带有 calc() 的规则有一个删除线和一个黄色三角形左侧的感叹号。这表明该属性或值未被识别。

如何让它在现代浏览器中工作？因为它是一个值而不是一个属性，所以供应商前缀到哪里去了？

更新：

当我说它不起作用时，我的意思是 Chrome 开发工具说它无法识别我对它的使用 width: calc(100%-88px); 。我怎么知道它没有识别它？由于 chrome 开发工具中样式规则旁边的删除线和黄色三角形图标。

原文由 Irfan Mir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题中的问题是由于减法运算符周围缺少空间引起的。

请注意，语法要求二进制“+”和“-”运算符周围有空格。 ‘*’ 和 ‘/’ 运算符不需要空格。

https://www.w3.org/TR/css3-values/#calc-syntax

This article 提到间距对于明确的解析是必要的。

坏： calc(100%-88px)

好： calc(100% - 88px)

---

我怎么知道它没有识别它？由于 chrome 开发工具中样式规则旁边的删除线和黄色三角形图标。

在 Chrome 的开发者工具中查看时被删除的属性可能有效但被覆盖；但是，被划线 且 旁边带有警告三角形图标的属性无效。

---

2022 年更新 - calc() 在各种场景中 得到 所有现代浏览器的支持，但仍需要适当的间距。

原文由 Tim M. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 -webkit 运算符前后的前缀和空格

width: -webkit-calc(100% - 88px);
width: -moz-calc(100% - 88px);
width: calc(100% - 88px);

原文由 Tamil Selvan C 发布，翻译遵循 CC BY-SA 3.0 许可协议