CSSフレックスボックスブラウザの互換性の問題

Question

私はCSS3のフレックスボックスレイアウトを利用して、ウェブサイト上にコンポーネントを配置しています。大部分は、すべてがうまくいっています。しかし、古いiPad（iOSバージョン9.3.5（どこでSafariバージョンを見つけるか分からない））とSamsung Edge 6の「インターネット」アプリケーションでウェブサイトをテストした後、私はいくつかの問題を明らかにした。コンテンツはフッターと同じように完全に読み込まれますが、コンテンツの一番上にフッターが下に表示されているのではなく、フッターがコンテンツの上に無作為に読み込まれているように見えます。ブラウザの上部）。

Google ChromeとMicrosoft Edgeの最新バージョン、iPhone 5のMobile Safari、iPhone 6のMobile Safari、Samsung Edge 6のMobile Google Chromeでテストしました。すべてが期待どおりに機能しました。

私は、コンポーネントを配置するためのチュートリアル（フレックスボックス）thisに続きました。ここで

が私のコードである（などwebkits含めて、私は互換性を向上させるだろうと思った）：

html { 
    height: 100%; 
} 

body { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 

    min-height: 100%; 
} 

.content { 
    -webkit-order: 1; 
    -ms-flex-order: 1; 
    order: 1; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
} 

footer { 
    -webkit-order: 2; 
    -ms-flex-order: 2; 
    order: 2; 
} 

私もそれがどんな影響を与えていたかどうかを確認していないが、それでも何もする「順序」プロパティに追加しました。

だから私が疑問に思っているのは、これに対する解決策はありますか？そうでない場合は、近代的ではないブラウザーにとって許容できる代替手段として何をすべきですか？

display: inline-block; 
vertical-align: top; 

をそれとも、より深く行きたい場合は、テーブル方式を使用することができます。

おかげで、

マシュー

Answer 1

あなたが適切な代替方法を見たい場合は、私が考えるでしょう。

親要素：

display: table; 

子要素：明らかに

display: table-cell; 

あなたは要素の表示であることがフレックスしたい、とCSSはあなたが適用できるカスケード接続されているので、表示：テーブル;新しいブラウザに影響を与えることなく、要素に：

.myElement{ 
    display:table; // Work on older - none support. 
    display: flex; // Work on newer browsers. 
} 

@Baruchコメントブラウザのサポートに指摘しているようにすべてのもので、残念ながら古いブラウザでは、フレックス好きではありません。

また、特定のブラウザのユーザー数、たとえば実際にsamsungブラウザを使用している人の数なども考慮します。 http://gs.statcounter.com/を使用すると、ユーザーベースが低く、プロジェクトが予算を十分に配分していない場合は、サポートを中止すると大きな助けになります。

グレースフル・デグラデーションを可能にする - すべてのブラウザでページが同じに見えることはありませんが（それは不可能です）、ページが使用可能で、ユーザーが情報を得ることができれば問題は何ですか？

これが役に立ちます。