23

我了解了 CSS 函数 calc() 及其真棒。我试着像这样使用它：

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

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

为什么它不起作用？

4

8 回答 8

52

运算符-必须用空格包围：

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

引用MDN 信息calc()：

注意：+and-运算符必须用空格包围。例如，calc(50% -8px)将被解析为一个百分比后跟一个负长度——一个无效的表达式——而calc(50% - 8px)一个百分比后跟一个减法运算符和一个长度。同样，calc(8px + -50%)被视为一个长度，后跟一个加法运算符和一个负百分比。

*and/运算符不需要空格，但为了一致性而添加它是允许和推荐的。

对此的正式声明在CSS 值和单位模块第 3 级规范的第 8.1.1节中。

于 2013-02-27T11:41:07.140 回答
18

除了 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 **/
于 2014-04-22T12:25:05.060 回答
5

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

于 2013-02-27T09:21:32.233 回答
4

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

您可以通过在它周围包裹一个 div （即display: block）并在display: table内设置元素的宽度来解决此问题width: 100%。您将calcd 宽度应用于周围div。

于 2015-09-22T18:56:58.307 回答
2

为了使您的功能正常工作，您需要在 operator sign 之间留有空格。

例如：

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

calc() 文章提供了对该问题的进一步详细解释。

于 2018-03-06T12:43:50.800 回答
1

首先，+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>

它适用于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>

于 2017-12-21T14:24:49.643 回答
0

使用最新版本的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定位它。

于 2013-10-22T09:53:49.300 回答
0

您需要空格，并且如果您使用预处理器格式，它可能会像这样calc(~"100% - 20px")，否则它可能不起作用。

于 2017-06-20T19:56:13.253 回答