Question

我最近在设计网站布局时遇到了一些意想不到的行为。我惊讶地发现calc()的行为似乎完全改变，这取决于其参数中是否存在基于百分比的单位。

这是一个极小的复制品。

＆＃13;

.container {
  font-size: 30px;
  display: inline-block;
  border: solid purple .1em;
}

.inner {
  border: solid orange .1em;
}

.inner.em   { width: 3em; }
.inner.calc { width: calc(3em + 0%); }

＆＃13;

<div class="container">
  <div class="inner em">abc</div>
</div>

<hr>

<div class="container">
  <div class="inner calc">abc</div>
</div>

＆＃13;

第二个让我感到惊讶，因为我希望calc(3em + 0%)与3em相同。但是，我测试过的每个浏览器都表现出这种行为。任何百分比都会出现此问题。 0%并不特别。这是css规范的一部分吗？

Answer 1

specs for calc明确表示当时没有完全解决：

如果百分比未按计算值解析，则不是在'calc（）'表达式中解决，例如'计算（100％ - 100％+ 1em）' 解析为'calc（0％+ 1em）'，而不是'calc（1em）'。如果有特殊的话计算价值百分比的规则（例如'身高' 属性），只要'calc（）'表达式包含，它们就会应用百分比。

我会暂时推测10.2：

如果包含块的宽度取决于此元素的宽度，则在CSS 2.1中未定义结果布局。

适用于此处，因为涉及百分比，所以就像内部块的width:150%一样，外部块使用缩小到适合。

calc（）在包含百分比时如何工作？

1 个答案: