css - Safari + CSS：将“calc”与“vh”一起使用不起作用

Question

我在 Safari 上遇到了一个非常小众的 CSS 问题。

我有以下 CSS 规则：

min-height: calc(100vh - 115.5px - 25px*2);

这适用于 Chrome，但 Safari 似乎不喜欢和的calc组合vh。（例如，如果我用替换它，它会起作用vh——%但我确实需要根据vh或一些适当的替代方法进行计算。）

有什么办法可以解决这个问题吗？或者，是否有另一种在 Safarivh上友好的引用方式？calc

score 7 · Accepted Answer

在使用 vw 或 vh 之前，您应该定义：

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
}

并确保在 + 和 - 之间使用空格，就像你做的那样。

score 4 · Accepted Answer

一般来说，Safari 的视口单元似乎有点问题，特别是如果您返回一两个版本。上次我尝试使用 vh/vw 时，我遇到了类似的问题，最终使用了v-unit javascript micro-lib，并且效果很好。

CSS 在布局计算等方面正在迅速赶上 javascript，但是当它变得复杂时，用一些轻量级脚本来补充你的 css 通常比单独使用 CSS 效果更好。

score 2 · Accepted Answer

这是一个已知错误- 也在caniuse上报告（在已知问题下）。

有关解决方法，请参阅此 SO 答案。

3 回答 3