logo标签列表

为什么CSS的calc()函数不起作用？

css
26
我了解CSS中的calc()函数，它非常棒。我尝试使用它，例如：
#abc{width:calc(100%-20px)}

但是这个函数存在问题，它无法工作。我在IE9和Safari中测试了这段代码，它无法正常工作。
为什么它无法正常工作？
4
请查看这张兼容性表。 - Passerby
8个回答
60

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

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

引用 MDN关于calc()的信息：

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

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

这个问题的正式声明在CSS Values and Units Module Level 3规范的条款8.1.1中。

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 **/
5
使用 Modernizr，您可以检查浏览器是否支持此功能，如果不支持，则可以回退到 JavaScript 或另一种样式。http://modernizr.com/ - Youn Elan
是我自己的问题还是caniuse页面忘记提到使用前缀了？ - csilk
4

IE9的calc()方法在display: table元素上无法正常工作。

您可以通过在其周围包装一个div（display: block）并使display: table元素内的宽度为width: 100%来解决此问题。然后将calc的宽度应用于周围的div。

2
为了使您的函数正常工作，您需要在运算符号之间留有空格。
例如：
#abc{
  width: calc(100% - 20px)
}

calc()文章提供了更详细的解释。

1

首先，在+或-前后应该有空格。您还可以使用*，/并将它们组合在一起。请参见以下示例：

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

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来定位它。

在Safari v5.1.7中处理CSS宽度计算的好方法：)) - ss888
0
你需要加上空格，如果你使用预处理器，请像这样格式化：calc(~"100% - 20px")，否则可能无法正常工作。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接