CSS3 calc（100％-88px）在Chrome中不起作用

我注意到CSS 3calc()函数作为单位的用法width在最新版本的Chrome中不起作用。

在Chrome Developer工具中，带有的规则calc()具有删除线，并在其左侧的黄色三角形中带有感叹号。这表示无法识别该属性或值。

如何使它在现代浏览器中运行？因为它是一个值而不是一个属性，所以供应商前缀在哪里？

更新：

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

问题中的问题是由于减法运算符周围空间不足而引起的。

请注意，语法在二进制'+'和'-'运算符周围需要空格。'*'和'/'运算符不需要空格。

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

^{我推测这是为了弄清楚运算符和带符号的数字之间的区别。}

差： calc(100%-88px)
好： calc(100% - 88px)

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

这是一个属性袭击在Chrome的开发者工具查看时可能是有效的，但在重载; 然而，财产被勾销，并警告三角形图标，旁边是无效的。

其他注意事项

• Chrome已经支持calc()了相当长的一段时间（在OSX和Windows上已确认​​）。
• Chrome可能不支持其中的视口单位，例如vh / vw calc()。截至2014年底，有实现此功能的活动，但相关的bug仍未解决。
• 在我的测试，Safari浏览器将支持calc()与-webkit上OSX但不是的Windows供应商前缀。
• IE9 +支持calc()没有供应商前缀。
• FF支持calc()无供应商前缀。

-webkit在运算符周围使用前缀和空格

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

我在calc财产方面有些挣扎，但只有以下方法有效。

-webkit-calc(~'100% - 40px'); // good: result 395px (in my application)

以上所有建议：

-webkit-calc(100% - 40px); // bad: result 60%

最终以60％的错误计算得出。

希望它能帮助到别人。