CSS3 calc（100％-88px）在Chrome中不起作用

  • Z时代
  • 2024-01-10
  • 分类：问答

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

在Chrome Developer工具中，带有的规则calc()具有 删除线 ，并在其左侧的黄色三角形中带有感叹号。这表示无法识别该属性或值。

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

更新：

当我说它不起作用时，我的意思是Chrome开发工具在说它无法识别我的用法width:

calc(100%-88px);。我怎么知道它无法识别？由于chrome开发工具中样式规则旁边的删除线和黄色三角形图标。

回答：

问题中的问题是由于减法运算符周围空间不足而引起的。

请注意，语法在二进制’+’和’-‘运算符周围需要空格。’*’和’/’运算符不需要空格。

我推测这是为了弄清楚运算符和带符号的数字之间的区别。

calc(100%-88px)

calc(100% - 88px)

我怎么知道它无法识别？由于chrome开发工具中样式规则旁边的删除线和黄色三角形图标。

这是一个属性 袭击 在Chrome的开发者工具查看时可能是有效的，但在重载; 但是，穿过属性 并 在其旁边带有警告三角形图标的属性无效。

  • Chrome已经支持calc()了相当长的一段时间（在OSX和Windows上已确认​​）。

  • Chrome 可能不支持其中的视口单位，例如vh / vw calc()。截至2014年末，有实施此功能的活动，但相关的bug仍未解决。

  • 在我的测试，Safari浏览器将支持calc()与-webkit上OSX但不是的Windows供应商前缀。

  • IE9 +支持calc()没有供应商前缀。

  • FF支持calc()无供应商前缀。

以上是 CSS3 calc（100％-88px）在Chrome中不起作用 的全部内容， 来源链接： utcz.com/qa/435227.html

回到顶部