CSS：是否存在具有高度值的层次结构？

Question

我想将calc函数用于我的高度值，但是一些旧的浏览器不支持它并且它使网站看起来很糟糕。

 .container2 {
        height: calc(100% - 87px);
        height: -webkit-calc(100% - 87px);
        height: -moz-calc(100% - 87px);
        height: 500px;
    }

我想如果我这样做，支持calc函数的浏览器会首先使用它们，但如果没有，那么在这种情况下它会使用基本值500px。

有没有办法首先使用calc高度，如果浏览器不支持，则使用普通500px高度？

希望有意义

Answer 1

据我所知，你必须把后备放在第一个：

.container2 {
    height: 500px;
    height: calc(100% - 87px);
    height: -webkit-calc(100% - 87px);
    height: -moz-calc(100% - 87px);
}

Answer 2

你有它倒退：浏览器将处理同一规则中的所有声明并使用最后一个适用的声明。

因此，有两点：您的后备500px值需要排在最前面，并且您需要在底部使用未加前缀的calc()值，以确保浏览器使用其供应商的标准化实现特定的：适用时：

.container2 {
    height: 500px;
    height: -webkit-calc(100% - 87px);
    height: -moz-calc(100% - 87px);
    height: calc(100% - 87px);
}