web-dev-qa-db-ja.com

CSS計算がSafariとフォールバックで機能しない

作業中のこのレイアウトがあります。必要な計算を行うには、CSS calcに強く依存します。

width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);

今、私はこれをSafariで動作させることができません。私が間違っていることはありますか？

また、サポートしていないブラウザにフォールバックメカニズムを導入する方法はありますか？横の2つから真ん中のオブジェクトを差し引く必要があるため、パーセンテージはうまくいきません。



ありがとう。

htmlcsssafarifallback
26
Borsn

私がこの問題を解決したのは、CSS Calcをサポートしていない古いブラウザが読み取るだけの、純粋なCSSフォールバックを導入することです。

figure.left {
    width: 48%;
    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);
}

ブラウザーが計算値を読み取れない場合、左右のパネルの幅は48％になります。

figure.logo {   
    min-width: 40px;
    width: 4%;
    width: -webkit-calc(40px);
    width: -moz-calc(40px);
    width: calc(40px);
}

また、2つのパネルの間にあるロゴの幅は4％になります。また、最小幅は40ピクセルです。計算値がブラウザで読み取れる場合、それらは40ピクセルです。

39
Borsn

あなたはコードがうまく見えるので、問題はブラウザの互換性だと思います。 Mozilla Documentation によると、この機能はChrome、Firefox、およびIE（新しいバージョン）で動作しますが、Opera =およびSafariでバグがあります この質問 互換性情報の詳細については、はるかに安全な代替手段として、Javascriptで計算を行う方法があります。

_if ($(document).width() >= 750){
  $("#yourElementsID").css("width",$("#yourElementsID").width()*0.5-20)
} else if ($(document).width() >= 400){
  // do something here for smaller values
}
_

jQuery .width() 関数を使用してドキュメントの幅を検出し、それに応じて要素の幅を設定できます。ただし、警告するだけで、スクリプトの外部とスタイルシートの内部にはできるだけ多くのスタイルを保持するようにしてください。

それでも一部のブラウザーで動作しない場合は、 Modernizr を使用してブラウザー/バージョン/ OSを検出し、ページの別のバージョンにリダイレクトします。

編集1：応答性を追加
編集2：削除された間隔
Edit 3：Modernizrに関する記述を追加

2
hkk