Question

我了解了CSS函数calc（）及其真棒。我尝试使用它：

#abc{width:calc(100%-20px)}

但是这个功能的问题在于它不起作用。我测试了这个代码IE9和Safari，它没有用。

为什么不起作用？

Answer 1

操作符“ - ”必须用空格包围：

#abc{width:calc(100% - 20px)}

引用MDN info on calc()：“注意：+和 - 运算符必须始终用空格包围。例如，calc（50％-8px）的操作数将被解析为百分比，后跟负长度，无效表达式，而calc的操作数（50％ - 8px）是百分比，后跟减号和长度。”

关于此的正式声明在CSS值和单位模块级别3 CR的clause 8.1.1中。

Answer 2

除了Android的原生浏览器支持calc()之外的所有现代浏览器都更容易采用。但请注意，它会对布局产生重大影响，并因此在不受支持的浏览器上破坏您的设计。

您应该使用后备声明，因此它不会破坏不支持它的浏览器。

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 **/

Answer 3

IE9，IE10和Safari 6.0（使用-webkit-前缀）支持它。您可以在此处查看整个支持表：http://caniuse.com/#feat=calc

Answer 4

IE9的calc()方法实现不适用于display: table的元素。

您可以通过在其周围包裹div（display: block）并在display: table内创建width: 100%元素的宽度来解决此问题。您将calc d宽度应用于周围的div。

Answer 5

首先，+或-之前和之后应该有空格。您还可以使用*，/并将它们合并。见例：

.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>

适用于<{1}}的，但无效 display: table（行占用整个空间）并且不适用于{{ 1}}（如果一个单元占用整个空间;如果有几个 - 每个单元根据其内容占用空间）。

display: table-row

display: table-cell

Answer 6

为了让您的功能正常工作，您需要在操作员标志之间设置空格。

例如：

#abc{ width: calc(100% - 20px) }

calc() article提供了有关该问题的进一步详细说明。

Answer 7

使用最新版本的 Modernizr ，您可以查看csscalc支持。只需使用 Modernizr.csscalc 即可。如果支持，此函数将返回true，否则返回false。在你的情况下，你会在你的CSS中有这个：

#abc {  width:calc(100% - 20px); }

并在 javascript 中（我在这里使用 jQuery ）

if(!Modernizr.csscalc){
    $('#abc').width($(PARENT_EL).width() - 20)
}

顺便说一句。最好使用类名而不是ID来设置元素的样式。元素的ID只应用于通过 javascript 来定位它。

Answer 8

你需要空格，如果你使用预处理器格式，它就像calc(~"100% - 20px")一样，或者它可能不起作用。

Answer 9

IE9支持CSS calc（）并且你必须在calc中的负数周围添加空格是正确的。

虽然知道我与IE9有一个非常相似的问题，width: 50%产生的结果与width: calc(50%)不同。事实证明，它与设置为display的{{1}}类型有关。将其更改为inline-table使inline-block再次生效。请注意，http://caniuse.com/#feat=calc将IE9的calc()支持标记为“部分”。

为什么CSS calc（）函数不适合我？

9 个答案: