7

受这个问题的启发，我发现了这个有趣的现象。

由于负宽度是非法的，因此应该被忽略，我希望样式属性像width:-200px;和width:calc(0% - 200px);没有效果。事实上，对于第一个它没有。然而，第二个并没有被忽略：而是使用 0 的宽度。

看这个例子：

div {border:1px solid; background:lime;}

#badwidth {width:-200px;}

#badcalc {width:calc(0% - 200px);}
Div with bad width:
<div id="badwidth"> </div>

Div with bad calc:
<div id="badcalc"> </div>

如果 width 属性被忽略，则 div 将是其全宽（如顶部）。但是，它被折叠为 0（见左边的黑线；那是边界）。

作为参考，这里有一些其他的 div，以证明 1) 其calc(0% - 200px)本身不是错误，以及 2) 它们工作正常并且第一个片段是异常的。

div {border:1px solid; background:lime;}

#calc {margin-right:calc(0% - 200px);}
Plain div:
<div> </div>

With calc(0% - 200px) in a place where it's OK:
<div id="calc"> </div>

那么，为什么正常宽度和计算宽度的行为不同呢？
如果它只是一个浏览器，我会称之为错误。但他们都以同样的方式对待这个！所以一定有我忽略的东西。什么？

4

1 回答 1

8

正如您所经历的那样，计算的评估和规则中的允许值是不同的。根据规范CSS Values and Units：

虽然某些属性允许负长度值，但这可能会使格式复杂化，并且可能存在特定于实现的限制。如果允许但不支持负长度值，则必须将其转换为可以支持的最接近的值。

在这种情况下，-200四舍五入，0因为它是宽度支持的最接近的值。

编辑

之前的部分还指出：

属性可能会将长度值限制在某个范围内。如果值超出允许范围，则声明无效，必须忽略。

声明 时width: -200px，此值超出可接受范围，因此被忽略。但是，它似乎在检查发生之前calc评估了 -200 ，并将其四舍五入到可接受的范围内，因此它不会被忽略。

更新

感谢@CBroe对 calc 规范的参考：

值的解析时范围检查不在 calc() 中执行，因此超出范围的值不会导致声明无效。但是，从表达式产生的使用值必须限制在目标上下文允许的范围内。

由于不允许小于 0px 的宽度，这三个声明是等价的：

width: calc(5px - 10px);
width: calc(-5px);
width: 0px;

但是请注意 width: -5px 不等于 width: calc(-5px)！calc() 之外的超出范围的值在语法上是无效的，并导致整个声明被删除。

于 2017-02-02T12:35:42.593 回答