CSS3 calc(100%-88px)无法在Chrome中运行

Question

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

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

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

更新:

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

Answer 1

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

请注意,语法需要围绕二进制"+"和" - "运算符的空格.'*'和'/'运算符不需要空格.

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年底,有实施此活动的活动,但相关的错误仍然是开放的.
• 在我的测试中,Safari将支持OSX calc()上的-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%.

希望它对某人有帮助.