为什么在将0作为唯一参数传递给calc()函数时,我必须指定一个单位标识符(例如'px')？

Question

该CSS值和单位模块3级状态:

...对于零长度,单位标识符是可选的(即可以在语法上表示为<number>'0').

这就是为什么我们中的大多数以0交易时,如掉落单元标识符0px,0em,0%等所有的计算结果为相同的长度.

同样的文档还说明了这个calc()功能:

...可用于任何<length>,<frequency>,<angle>,<time>,<number>,或<integer>值是允许的.一个的部件calc()表达可以是文字值,attr()或calc()表达,或<percentage>值的是解决前述类型之一.

这里的问题是Chrome,Firefox,Opera和Internet Explorer的最新版本被calc(0)视为无效表达.这0是一个解析为<number>类型的值(正如我们从本文中引用的第一个片段中了解到的那样).

如果我们尝试width: calc(0)通过W3C自己的CSS Validator进行验证,则会出现以下错误:

值错误:宽度calc(0)不是宽度值:calc(0)

但是,如果我们尝试并验证width: 1,我们会给出以下错误,这似乎与此错误相矛盾:

值错误:宽度只能0是一个长度.你必须在你的号码后面放一个单位:1

---

例

在此示例中,1px红色边框应用于每个code元素.在尝试覆盖边框宽度时,第一个calc(0)指定为边框宽度,后者指定为边框宽度calc(0px).

code {
  display: inline-block;
  padding: 2px;
  
  border: 1px solid red;
}

code:first-of-type {
  border-width: calc(0);
}

code:last-of-type {
  border-width: calc(0px);
}

<code>border-width: calc(0);</code>
<code>border-width: calc(0px);</code>

对于使用不支持CSS calc()功能的浏览器的用户,这里是我在Chrome(v39)中看到的结果的图像:

如果我们在Chrome的Element Inspector中查看此calc(0)内容,我们会发现这确实被视为无效:

---

是否有理由calc(0)将其视为无效表达？这个数字0不是一个被视为"文字"的值吗？

Answer 1

基本上就是 @Dave 和 @BoltClock 所说的：

该规范的第 8.1.2 节表示，数学表达式的解析类型calc(0)由它包含的值的类型决定，对于 NUMBER 标记来说，它0是 <number> 或 <integer>。这两种类型都不是有效的width值，它采用 <length> 或 <percentage>，因此表达式无效。

但是，如果您使用0作为值，则可以根据您引用的规范第 5 节将其解析为 <length>。

calc(0)在语法上（或词汇上，如我们所见）不等于0，因此第 5 节不适用于它。

或者您是在问一个关于为什么要这样编写规范的哲学问题吗？