css - 嵌套 CSS 计算不适用于 IE 11 和 Edge

Question

我尝试使用以下 CSS 代码缩放 div 高度。在 Chrome 和 FF 浏览器上一切正常，但在 IE11 和 IE Edge 上不工作。

Chrome 和 FF:

Height:calc((100vh - 100%) + 30px);

当我尝试安装 Edge 时，检查其转换为:

Height:calc(30px + 100vh + -100%);


.flyout-container {
    text-align: left;
    visibility: hidden;
    position: fixed;
    top: 64px!important;
    bottom: auto;
    right: 0;
    width: 464px;
    background-color: #fff;
    z-index: 999;
    overflow: hidden;
    border-bottom: 4px solid #81d8d0;
    max-height: inherit;
    transition: .4s ease;
    padding: 0 16px 0 2.5vw;
    height: 0;
}


.flyout-container.active {
    padding-top: 2.5vw;
    bottom: 0;
    visibility: visible;
    overflow: hidden;
    max-height: none;
    height: calc((100vh - 100%) + 30px);
}

有什么办法可以使 IE 正确呈现 calc()？

Answer 1

括号在提供的示例中不是必需的。加法和减法遵循交换规则，表示没有必要将它们括起来。

您的问题可能是由您使用的百分比值引起的。请提供完整的代码，以便检查是什么阻止了预期的行为。

不过，calc() 在 IE 中不完全支持，因为存在大量已知问题。请看caniuse.com看看有什么没有按预期工作。