我用计算器设置了一个宽度,它应该返回 0,但当我查看计算出的宽度时,它显示为 22.2333 像素。
:root {
--show: 1;
}
.test {
display: inline-block;
overflow: hidden;
width: calc(var(--show) - 1);
opacity: calc(var(--show) - 1);
}
<span class="test">test</span>
<span class="test2">
test2
</span>
在我看来,.test 的宽度应该为 0,尤其是当不透明度为 0 时。如果我将 width 属性的值明确设置为 0,它就可以工作。
最佳答案
width
接受长度或百分比值以及您的 calc()
将返回一个整数。
它对你来说可能看起来微不足道,因为结果是 0
但浏览器并非如此。 calc(0)
处理方式与 0
不同.第一个无效 width
而第二个是有效的。
A math function can be many possible types, such as
<length>
,<number>
, etc., depending on the calculations it contains, as defined below. It can be used anywhere a value of that type is allowed. ref
添加一个单元来克服这个问题:
:root {
--show: 1;
}
.test {
display: inline-block;
overflow: hidden;
width: calc((var(--show) - 1)*1px);
opacity: calc(var(--show) - 1);
}
<span class="test">test</span>
<span class="test2">test2</span>
关于css - 为什么这个元素的宽度不为0?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69653989/