相关疑难解决方法(0)

我注意到我使用CSS3 calc()功能作为单位width在最新版本的Chrome中无效.

在Chrome开发者工具中,规则通过它calc()有一个删除线,并在其左侧有一个黄色三角形中的感叹号.这表明财产或价值未被识别.

如何让它在现代浏览器中运行？因为它是一个值而不是一个属性,所以供应商前缀在哪里？

更新:

当我说它不起作用时,我的意思是Chrome Dev Tools说它没有认识到我对它的使用width: calc(100%-88px);.我怎么知道它没有认出来？由于chrome开发工具中样式规则旁边的删除线和黄色三角形图标.

我有相对复杂的公式，例如 transform: scale(var(--image-scale)) translateY(calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y)))

如何调试计算值？此外，有没有一种方法可以验证/突出显示公式错误？

我试图这样输出到伪元素，但没有运气

    position: fixed;
    display: block;
    left:0;
    right: 0;
    background: yellow;
    padding: 5px;
    z-index: 100;
    content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));

我发现的唯一方法是将计算的一部分放到未使用的数值属性background-position-x上，例如在下面的gif上，这样它将在计算选项卡上显示计算值-有用但不是很方便（background-position-x在页面滚动时注意更改）：

    position: fixed;
    display: block;
    left:0;
    right: 0;
    background: yellow;
    padding: 5px;
    z-index: 100;
    content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));

var sc = ScrollOut({
    cssProps: true
  })
  const results …