CSS CSS3 calc(100%-88px) 在 Chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16290873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 calc(100%-88px) not working in Chrome
提问by Irfan Mir
I noticed that my usage of the CSS3 calc()function as the unit for widthis not working in the latest version of Chrome.
我注意到我使用的 CSS3calc()函数作为单位width在最新版本的 Chrome 中不起作用。
In the Chrome Developer tools, the rule with calc()has a strikethroughthrough 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.
在Chrome开发人员工具，随治calc()有一个删除线，通过它，并在黄三角，以它的左侧有一个感叹号。这表明该属性或值未被识别。
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?
我如何让它在现代浏览器中工作？因为它是一个值而不是一个属性，所以供应商前缀在哪里？
Update:
更新：
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 Dev Tools 说它没有识别我对它的使用width: calc(100%-88px);。我怎么知道它没有识别它？由于 chrome 开发工具中样式规则旁边的删除线和黄色三角形图标。
回答by Tim Medora
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-syntax
https://www.w3.org/TR/css3-values/#calc-syntax
I speculate that this is to make clear the differentiation between operators and signed numbers.
我推测这是为了明确运算符和有符号数之间的区别。
Bad:calc(100%-88px)
Good:calc(100% - 88px)
坏：calc(100%-88px)
好：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 开发工具中样式规则旁边的删除线和黄色三角形图标。
A property that is struckin when viewed in Chrome's developer tools may be valid but overridden; however, a property struck through andwith a warning triangle icon next to it is invalid.
这是一个属性袭击在Chrome的开发者工具查看时可能是有效的，但在重载; 但是，被划破并在其旁边带有警告三角形图标的属性无效。
Other Notes
其他注意事项
- Chrome has supported
calc()for quite some time(confirmed on OSX and Windows). - Chrome may not support viewport unitssuch as vh/vw inside
calc(). As of late 2014, there is activity on implementing this, but the related bugis still open. - In my testing, Safari will support
calc()with the-webkitvendor prefix on OSX but not Windows. - IE9+ supports
calc()with no vendor prefix. - FF supports
calc()with no vendor prefix.
回答by Tamil Selvan C
Use -webkitprefix and spaces around the operator
-webkit在运算符周围使用前缀和空格
width: -webkit-calc(100% - 88px);
width: -moz-calc(100% - 88px);
width: calc(100% - 88px);
回答by Tomasz Czechowski
I struggled with calcproperty a bit and only below approach worked.
我在calc财产方面有点挣扎，只有以下方法有效。
-webkit-calc(~'100% - 40px'); // good: result 395px (in my application)
every above suggestions like:
以上每个建议，如：
-webkit-calc(100% - 40px); // bad: result 60%
ended up with wrong calculation like 60%.
最终计算错误，如 60%。
Hope it helps somebody.
希望它可以帮助某人。
