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

Question

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

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

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

更新：

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

Answer 1

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

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

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

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

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

---

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

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

---

其他说明

• Chrome 已支持 calc() 和 quite some time（在 OSX 和 Windows 上确认）。
• Chrome may not support viewport units 如 vh/vw 内 calc()。截至 2014 年底，有一些实施活动，但 the related bug 仍然开放。
• 在我的测试中，Safari 将在 OSX 上支持带有 -webkit 供应商前缀的 calc()，但在 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%。

Answer 4

我必须在 Chrome 中执行类似的操作才能使其正常工作...

calc(100vh - 88px);