为什么 CSS calc() 函数对我不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15108285/
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
Why doesn't the CSS calc() function work for me?
提问by Eminence
I learned about the CSS function calc() and its awesome. I tried to use it like:
我了解了 CSS 函数 calc() 及其很棒的功能。我试着像这样使用它：
#abc{width:calc(100%-20px)}
But the problem with this function is that it doesn't work. I tested this code IE9 and Safari and it didn't work.
但是这个功能的问题是它不起作用。我测试了这段代码 IE9 和 Safari，但没有奏效。
Why doesn't it work?
为什么不起作用？
回答by Jukka K. Korpela
The operator “-” must be surrounded by spaces:
运算符“-”必须用空格包围：
#abc{width:calc(100% - 20px)}
Quoting MDN info on calc(): “Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length.”
引用MDN 信息calc()：“注意：+ 和 - 运算符必须始终用空格包围。例如，calc(50% -8px) 的操作数将被解析为一个百分比，后跟一个负长度，一个无效的表达式，而 calc(50% - 8px) 的操作数是一个百分比，后跟一个减号和一个长度。”
The formal statement on this is in clause 8.1.1of the CSS Values and Units Module Level 3 CR.
对此的正式声明在CSS Values and Units Module Level 3 CR 的第 8.1.1条中。
回答by Shenba
All the modern browsers except Android's native browser support calc()which makes it easier to adopt. But do note that it can have a big impact on the layout and the consequent breaking of your design on unsupported browsers.
除了 Android 的本机浏览器支持之外的所有现代浏览器都calc()更容易采用。但请注意，它会对布局产生重大影响，并因此在不受支持的浏览器上破坏您的设计。
You should use it with a fallback declaration, so it doesn't break browsers which don't support it.
您应该将它与回退声明一起使用，这样它就不会破坏不支持它的浏览器。
width: 500px; /** older browsers **/
width: -webkit-calc(50% - 20px); /** Safari 6, Chrome 19-25 **/
width: -moz-calc(50% - 20px); /** FF 4-15 **/
width: calc(50% - 20px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/
回答by MarcinJuraszek
It is supported by IE9, IE10 and Safari 6.0 (using -webkit-prefix). You can check whole support table here: http://caniuse.com/#feat=calc
它被 IE9、IE10 和 Safari 6.0（使用-webkit-前缀）支持。您可以在此处查看整个支持表：http: //caniuse.com/#feat=calc
回答by Kevin Beal
IE9's implementation of the calc()method doesn't work on elements which are display: table.
IE9 对该calc()方法的实现不适用于display: table.
You can work around this by wrapping a div around it (which is display: block) and making the width of the display: tableelement inside width: 100%. You apply the calcd width to the surrounding div.
您可以通过在其周围包裹一个 div（即display: block）并将display: table元素的宽度设置为 来解决此问题width: 100%。您将calcd 宽度应用于周围的div.
回答by B-GangsteR
First of all, there should be spaces before and after +or -. You can also use *, /, and combine them. See example:
首先，+or前后应该有空格-。你也可以使用*，/以及将它们结合起来。见示例：
.gen {
height: 100px;
background-color: blue;
border: solid 1px black;
}
.nocalc {
width: 50%;
}
.calc {
width: calc(100% / 4 * 2 + 50px - 40px);
/* 50% + 10px */
}<div class="gen nocalc"></div>
<div class="gen calc"></div>It workswith display: table, but it does not workwith display: table-row(row takes whole space) and does not work with display: table-cell(if one cell it takes whole space; if several - each cell takes space according to its content).
它适用于display: table，但不适用于display: table-row（行占用整个空间）并且不适用于display: table-cell（如果一个单元格占用整个空间；如果有多个 -每个单元格根据其内容占用空间）。
.cont-1 {
background-color: yellow;
}
.cont-2 {
background-color: red;
border: solid 1px black;
}
.width-m-50 {
width: calc(100% - 20px);
height: 100px;
}
.tab-simple {
display: table;
}
.tab {
display: table;
border: solid 1px black;
background-color: yellow;
width: 100%;
}
.tab-row {
display: table-row;
}
.tab-cell {
display: table-cell;
}<div class="cont-1">
<div class="cont-2 width-m-50">
div with width: calc(100% - 20px);
</div>
</div>
<div class="cont-1">
<div class="cont-2 tab-simple width-m-50">
tab with width: calc(100% - 20px);
</div>
</div>
<h3> tab with width 100% and two cells, 1-st with width calc(100% - 20px); 2-nd without: </h3>
<div class="tab">
<div class="tab-row">
<div class="cont-2 tab-cell width-m-50">
cell
</div>
<div class="cont-2 tab-cell">
cell
</div>
</div>
</div>回答by Nesha Zoric
In order for your function to work you need to have spaces between the operator sign.
为了使您的功能正常工作，您需要在运算符 sign 之间留有空格。
For example:
例如：
#abc{
width: calc(100% - 20px)
}
The calc() articleprovides a further detailed explanation of the issue.
该计算（）的文章提供了问题的进一步的详细说明。
回答by Vasil Enchev
You need spaces and also if you use preprocessor format it like this calc(~"100% - 20px")or it might not work.
您需要空格，并且如果您使用预处理器格式化它calc(~"100% - 20px")，则可能无法正常工作。
回答by Benjamin
With the latest version of Modernizryou can check csscalc support. Simply use Modernizr.csscalc. This function will return true if it is supported and false if it isn't. In your case you would have this in your css :
使用最新版本的Modernizr，您可以检查 csscalc 支持。只需使用Modernizr.csscalc。如果支持，此函数将返回 true，否则返回 false。在你的情况下，你会在你的 css 中有这个：
#abc { width:calc(100% - 20px); }
and in your javascript(I am using jQueryhere)
并在您的javascript 中（我在这里使用jQuery）
if(!Modernizr.csscalc){
$('#abc').width($(PARENT_EL).width() - 20)
}
BTW. It is better to style your elements with class names rather than ID. The ID of an element should only be used to target it through javascript.
顺便提一句。最好使用类名而不是 ID 来设置元素的样式。元素的 ID 只能用于通过javascript定位它。
回答by wortwart
It's both correct that IE9 supports CSS calc() and that you have to put spaces around a minus in calc.
IE9 支持 CSS calc() 并且您必须在 calc 中的减号周围放置空格都是正确的。
Although knowing that I just had a very similar problem with IE9, where width: 50%yielded a different result than width: calc(50%). It turned out that it had to do with the displaytype which was set to inline-table. Changing it to inline-blockmade calc()work again. Note that http://caniuse.com/#feat=calcmarks IE9's calc()support as "partial".
虽然知道我刚刚在 IE9 上遇到了非常相似的问题，但width: 50%结果与width: calc(50%). 事实证明，它与display设置为的类型有关inline-table。它更改为inline-block取得calc()再工作。请注意，http://caniuse.com/#feat=calc 将 IE9 的calc()支持标记为“部分”。
