CSS3 calc()不能在最新的chrome中工作

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

在Chrome开发人员工具中, calc()的规则有一个删除线,在它的左边有一个黄色三angular形的感叹号。 这表明财产或价值不被承认。

我如何使它在现代浏览器中工作? 因为它是一个价值而不是一个财产,供应商前缀在哪里去?

更新:

当我说这是行不通的,我的意思是,铬开发工具是说,它不承认我的使用它的width: calc(100%-88px); 。 我怎么知道它不承认? 由于chrome开发工具中的样式规则旁边有删除线和黄色三angular形图标。

更新2:

以下是我在Chrome开发工具中看到的截图: http : //cl.ly/image/2g3W1l2u022e

问题中的问题是由于减法操作员周围空间不足造成的。

请注意,语法需要二进制“+”和“ – ”运算符的空格。 '*'和'/'操作符不需要空格。

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

我推测这是为了弄清楚运营商和有号码的区别。

不好: calc(100%-88px)
好: calc(100% - 88px)


我怎么知道它不承认? 由于chrome开发工具中的样式规则旁边有删除线和黄色三angular形图标。

在Chrome的开发人员工具中查看的属性可能有效,但会被覆盖; 然而,通过旁边的警告三angular形图标的一个属性是无效的。


其他说明

  • Chrome支持calc()已经有一段时间了 (在OSX和Windows上已经确认)。
  • Chrome 可能不支持 calc()内的视窗单元,例如vh / vw。 截至2014年年底,有实施这个活动,但相关的错误仍然是开放的。
  • 在我的testing中,Safari将支持在OSX上使用-webkit供应商前缀的calc() ,但不支持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) 

每个以上的build议,如:

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

结果是错误的计算如60%。

希望它有助于某人。