Question

我注意到我使用CSS3 calc()功能作为width的单位在最新版Chrome中无效。

在Chrome开发者工具中，calc()的规则通过它有~~删除线~~，并在其左侧有一个黄色三角形中的感叹号。这表明财产或价值未被识别。

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

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

Answer 1

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

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

^{我推测这是为了明确运算符和有符号数之间的区别。}

糟糕： calc(100%-88px)
好： calc(100% - 88px)

我怎么知道它没有认出来？因为删除线以及chrome dev中样式规则旁边的黄色三角形图标工具。

在Chrome的开发者工具中查看时，触发的属性可能有效但已被覆盖;但是，通过和触及的属性旁边有一个警告三角形图标无效。

其他笔记

Chrome已为quite some time支持calc()（已在OSX和Windows上确认）。
Chrome may not support viewport units，例如calc()内的vh / vw。截至2014年底，有实施此活动的活动，但the related bug仍然开放。
在我的测试中，Safari将支持calc()在OSX上使用-webkit供应商前缀，但不支持Windows。
IE9 +支持calc()，没有供应商前缀。
FF支持calc()，没有供应商前缀。

Answer 2

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

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

Answer 3

我在calc属性方面苦苦挣扎，只有下面的方法才有效。

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

以上建议如下：

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

最终导致了错误的计算，例如60％。

希望它有所帮助。