我在Safari上遇到了一个非常小众的CSS问题。
我有以下CSS规则:
min-height: calc(100vh - 115.5px - 25px*2);
这适用于Chrome,但Safari似乎并不喜欢calc
和vh
的组合。 (例如,如果我将vh
替换为%
,则会有效 - 但我需要根据vh
或某些适当的替代方案进行计算。)
有没有办法解决这个问题呢?另外,还有另一种方式可以引用vh
calc
- 在Safari上友好吗?
答案 0 :(得分:4)
一般来说,Safari似乎与视口单元有关,特别是如果你回到一两个版本。我最后一次尝试使用vh / vw时,遇到了类似的问题并最终使用了v-unit javascript micro-lib,并且效果非常好。
CSS正在迅速赶上javascript进行布局计算之类的事情,但是当它变得复杂时,使用一些轻量级脚本来补充你的css通常比单独使用CSS更好。
答案 1 :(得分:4)
在使用vw或vh之前,您应该定义:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
并确保使用+和 - 之间的空格。
答案 2 :(得分:1)
这是known bug - 也在caniuse上报告(在已知问题下)。
请参阅this SO answer了解解决方法。