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

在提供的示例中不需要括号。加法和减法遵循交换规则，即在括号内没有意义。

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

不过，由于存在许多已知问题，IE中并未完全支持calc()。请查看caniuse.com，看看有什么不正常。

嵌套CSS Calc无法在IE 11和Edge上运行

1 个答案: