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

Posted 2023-03-06

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

【英文标题】：CSS3 calc(100%-88px) not working in Chrome [duplicate]

【发布时间】：2013-04-23 20:11:00

【问题描述】：

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

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

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

更新：

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

【问题讨论】：

实际上与***.com/questions/30412580/… 和***.com/questions/15108285/… 相同 - 对吧？

【参考方案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()，没有供应商前缀。

【讨论】：

很好的答案。最新更新回复：Chrome 的视口单元支持位于 March of this year，因此知情人士需要查看一下。

【参考方案2】：

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

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

【参考方案3】：

我在calc 属性上有点挣扎，只有以下方法有效。

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

以上所有建议如下：

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

计算错误，例如 60%。

【讨论】：

当使用-webkit-calc(~'100% - 40px'); 时它不起作用。也没有链接来解释~ 是什么，我在任何地方都找不到它。我看到了一些赞成票，所以也许这不是什么（这不是 OP 的内容）

这是 lesscss 语法。Less 被预先配置为计算“可能”的所有内容。有选项可以设置：lesscss.org/usage/index.html#command-line-usage-strict-math和lesscss.org/usage/index.html#command-line-usage-strict-units

【参考方案4】：

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

calc(100vh - 88px);

【讨论】：

这不会向现有答案添加任何内容，或者即使单独作为一个特别有用的答案。

然而它为我和至少另一个人解决了这个问题。

它的问题是它只是重复现有的内容。答案应该添加到对话中，而不是重复已经分享的内容。

"vh" 是不同的。

无关紧要；主题（和规则）是关于 operator 周围需要的空间，而不是关于正在使用的 unit 的内容。