Safari + CSS:使用" calc"与" vh"不起作用

时间:2014-08-26 23:56:48

标签: css css3 safari viewport-units

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

我有以下CSS规则:

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

这适用于Chrome,但Safari似乎并不喜欢calcvh的组合。 (例如,如果我将vh替换为%,则会有效 - 但我需要根据vh或某些适当的替代方案进行计算。)

有没有办法解决这个问题呢?另外,还有另一种方式可以引用vh calc - 在Safari上友好吗?

3 个答案:

答案 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了解解决方法。