可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I noticed that my usage of the CSS3 calc() function as the unit for width is not working in the latest version of Chrome.
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?
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.
Update 2:
Here is a screenshot of what I am seeing in Chrome dev tools: http://cl.ly/image/2g3W1l2u022e
回答1:
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
I speculate that this is to make clear the differentiation between operators and signed numbers.
Bad: calc(100%-88px)
Good: 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.
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.
Other Notes
- 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.
回答2:
Use -webkit prefix and spaces around the operator
width: -webkit-calc(100% - 88px); width: -moz-calc(100% - 88px); width: calc(100% - 88px);
回答3:
I struggled with calc property a bit and only below approach worked.
-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%.
Hope it helps somebody.
