calc()在包含百分比时如何工作？

Question

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

这是一个最小的复制品.

.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%); }

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

<hr>

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

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

Answer 1

calc的规范明确表示当时没有完全解决:

如果百分比未按计算值解析,则不会在'calc()'表达式中解析它们,例如'calc(100% - 100%+ 1em)'解析为'calc(0%+ 1em)',而不是'calc (1em的)".如果存在用于计算值中百分比的特殊规则(例如"高度"属性),则只要"calc()"表达式包含百分比,它们就会应用.

我会暂时推测10.2:

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

这里适用,因为涉及百分比,所以就像width:150%内部块的a一样,外部块使用缩小到适合.