CSS3 calc(100％-88px)在Chrome中不起作用 [英] CSS3 calc(100%-88px) not working in Chrome

问题描述

我注意到我将CSS3 calc()函数用作width的单元不能在最新版本的Chrome中使用.

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()的规则在其中穿过 strikethrough ，并在其左侧的黄色三角形中带有一个感叹号.这表明该属性或值未被识别.

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.

推荐答案

问题中的问题是由于减法运算符周围空间不足所致.

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.

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

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

错误: calc(100%-88px)
好: 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 可能不支持视口单元，例如.截至2014年底，已经有实施此活动的活动，但是相关的错误是仍然打开.
• 在我的测试中，Safari将在OSX上使用-webkit供应商前缀支持calc()，但不支持Windows.
• 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(100％-88px)在Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！