CSS3 calc（）在最新的chrome不工作 [英] CSS3 calc() not working in latest chrome

问题描述

我注意到我使用CSS3 calc（）函数作为 width 的单位不工作

I noticed that my usage of the CSS3 calc() function as the unit for width is not working in the latest version of Chrome.

在Chrome开发者工具中， calc（）的规则具有删除线通过它和在它的左边的黄色三角形中的感叹号。这表示属性或值无法识别。

In the Chrome Developer tools, the rule with calc() has a strikethrough through it and an exclamation mark in a yellow triangle to the left of it. This is signaling that the property or value is not recognized.

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

How do I get it to work in modern browsers? Because it is a value and not a property, where do the vendor prefixes go?

我说它不工作，我的意思是Chrome开发工具是说，它不能识别我的使用它 width：calc（100％-88px）; 。我怎么知道它不认识它？由于chrome开发工具中的样式规则旁边有删除线和黄色三角形图标。

When I say it doesn't work, I mean that Chrome Dev Tools is saying that it is not recognizing my usage of it width: calc(100%-88px);. How do I know it is not recognizing it? Because of the strikethrough and the yellow triangle icon next to the style rule in chrome dev tools.

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

Here is a screenshot of what I am seeing in Chrome dev tools: http://cl.ly/image/2g3W1l2u022e

推荐答案

问题的问题是由减法运算符周围空间不足造成的。

The problem in the question was caused by the lack of space around the subtraction operator.

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

Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces.

http://www.w3.org/TR/css3-values/#calc §8.1.1

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

： calc（100％-88px）

良好： ％-88px）

Bad: calc(100%-88px)
Good: calc(100% - 88px)

如何知道不认识吗？由于删除
和chrome dev
工具中样式规则旁边的黄色三角形图标。

How do I know it is not recognizing it? Because of the strikethrough and the yellow triangle icon next to the style rule in chrome dev tools.

在Chrome的开发人员工具中查看的触发的属性可能有效，但会被覆盖;

A property that is struck in when viewed in Chrome's developer tools may be valid but overridden; however, a property struck through and with a warning triangle icon next to it is invalid.

> 其他记事

• Chrome已支援 calc（） 相当一段时间（在OSX和Windows上已确认​​）。


• Chrome 可能不支持视口单位，例如vh / vw inside calc（）。截至2014年年底，有实施此活动的活动，但相关错误是


• 在我的测试中，Safari将使用 -webkit calc（）


• IE9 +支持 calc（），没有供应商前缀。


• FF支持没有供应商前缀的calc（）。

• Chrome has supported calc() for quite some time (confirmed on OSX and Windows).
• Chrome may not support viewport units such as vh/vw inside calc(). As of late 2014, there is activity on implementing this, but the related bug is still open.
• In my testing, Safari will support calc() with the -webkit vendor prefix on OSX but not Windows.
• IE9+ supports calc() with no vendor prefix.
• FF supports calc() with no vendor prefix.

这篇关于CSS3 calc（）在最新的chrome不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！