编辑：

Question

我已在最新版本的Firefox，Chrome，IE 11中对其进行了测试。在这些浏览器中，当您使用CSS calc()函数计算时，它都不起作用。 width。据我所知，我已正确应用它。作为参考，您可能需要检查

http://www.sitepoint.com/css3-calc-function/

为什么这不起作用？

div {
  background-color: blue;
  height: 50px;
  width: calc(100%-250px);
}

<div></div>

演示：

http://codepen.io/anon/pen/wazZWm

http://jsfiddle.net/h5mzcow1/

编辑：

是的，这个问题在许多编辑过程中都变成了重复，但我仍然认为这应该留在这里，因为它比例如CSS calc() not working更好地说明了问题。此外，imho的答案要好得多。

Answer 1

这是因为您必须在+或-运算符之间放置空格才能使其正常工作。

＆＃13;

div {
  background-color: blue;
  height: 50px;
  width: calc(100% - 250px);
}

＆＃13;

<div></div>

＆＃13;

来自MDN文档：

注意：+和-运算符必须始终用空格包围。   例如，calc(50% -8px)的操作数将被解析为   百分比后跟一个负长度，一个无效的表达，而   calc(50% - 8px)的操作数是一个百分比后跟一个减号   标志和长度。更进一步，calc(8px + -50%)被视为一个   长度后跟一个加号和一个负百分比。 *和/   运算符不需要空格，但添加它是为了保持一致性   允许，并推荐。

来源：MDN

W3C Documentation

为什么CSS calc（100％-250px）不起作用？

编辑：

1 个答案: