为什么它在 Chrome(版本 121 且不仅如此)中是一个错误,repeat(-10, 1fr)
但repeat(calc(-10), 1fr)
行为却像 1 一样?对于其他非正数也是如此。我期望行为是一样的......
section {
border: 1px solid orange;
background: antiquewhite;
display: grid;
padding: .5em;
gap: .5em;
}
section + section {
margin-top: 1em;
}
.a {
grid-template-columns: 1fr repeat(-10, 1fr) 1fr;
}
.b {
grid-template-columns: 1fr repeat(calc(-10), 1fr) 1fr;
}
div {
height: 1em;
background: gray;
}
<section class="a">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section class="b">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
https://www.w3.org/TR/css-values-4/#calc-range
对于数学函数(特别是
calc
),在解析过程中不会检查是否符合限制,但计算结果会被强制符合限制。在您的示例中,
repeat()
第一个值必须是正整数 (<integer [1,∞]>
),因此该数字-10
会减少到最接近的允许值,即1
。同时,对于显式指定的值(指定值),不会发生这种强制输入,并且声明的所有内容都会变得无效并被忽略。
文档中还有一个简单的例子:
width: -5px
invalid,浏览器会忽略这个规则,但会width: calc(-5px);
减少到最接近的允许值,结果是width: 0px;