5

Safari で非常にニッチな問題の CSS の問題が発生しています。

次の CSS ルールがあります。

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

calcこれは Chrome では機能しますが、Safari ではとの組み合わせが気に入らないようですvh。（たとえば、 に置き換えるvhと機能%しますが、に基づいて計算するvhか、適切な代替手段を計算する必要があります。）

これを機能させる方法はありますか？vhまたは、それを参照する別の方法はありcalcますか? Safari に適していますか?

4

3 に答える 3

7

vw または vh を使用する前に、以下を定義する必要があります。

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

+ と - の間にスペースを使用していることを確認してください。

于 2015-03-12T00:28:00.930 に答える
4

Safari は、特にバージョンを 1 つまたは 2 つ戻すと、一般的にビューポート ユニットに一種のバグがあるようです。前回 vh/vw を使用しようとしたとき、同様の問題に遭遇し、最終的にv-unit javascript micro-lib を使用することになり、非常にうまく機能しました。

CSS は、レイアウトの計算などで JavaScript に急速に追いついていますが、複雑になると、CSS だけを使用するよりも、軽いスクリプトで CSS を補完する方がうまくいくことがよくあります。

于 2014-08-27T00:04:11.523 に答える
2

これは既知のバグであり、 caniuseでも報告されています(既知の問題の下)。

回避策については、この SO の回答を参照してください。

于 2014-08-27T00:03:28.160 に答える