今更ですが、おいらが最後の最後に遭遇した IE 固有バグの対処法を載せておきます。笑
ヘッダー + コンテンツ + フッターがあるページで、真ん中のコンテンツの高さが足りないとフッターが上に上がっちゃうので、定石としての対応法があります。例えばこんな感じ。
body {
margin: 0;
display: flex;
flex-flow: column;
min-height: 100vh;
}
.entry-content {
flex: 1;
}
簡単に言うと、真ん中のコンテンツの最低高さを 100vh にしとけって意味ですね。
この flex-flow: column; が IE 効かないんですよ。min-height が 0 と扱われる?フッターがだだ上がりしちゃうようです。
なのでハックがありました。
body {
margin: 0;
display: flex;
flex-flow: column;
min-height: 0%;
}
.entry-content {
flex: 1 auto;
}
min-height を 0% にし、flex 1 に auto を追加。これでOK?
たまたま15日にクライアントさんから指摘があり、対応したというね。
明日からは知らんがなですが、本日は対応しておきます!って。笑 こんなんばっかのこの10数年でした。
これで本当に不毛な時間とおさらばです。「あぁ、こんなに嬉しいことは無い」by アムロレイって感じです!