ここで初めて自分の質問をします:)
私はウェブサイトに取り組んでおり、通常のトリックを使用してクライアントウィンドウの下部まで垂直に拡張しようとしました:
html, body { height: 100%; }
.container { min-height: 100%; }
次に、メイン コンテンツの上にいくつかのヘッダーを追加し、下部にスティッキー フッターを追加したいと考えました。これらの両方を独自のコンテナーにラップし、次のようにヘッダーを上部に引っ張りました。
.top { position: relative; z-index: 1; height: 168px; }
.end { height: 58px; }
ヘッダーとスティッキー フッターの高さを知っているので、コンテンツが長すぎない限りクライアント ウィンドウを正確に (スクロールバーなしで) いっぱいになるように、ページ全体の高さを調整することにしました。私は負のマージンでこれを行いました：
.container { overflow: hidden; min-height: 100%; margin-top: -164px; margin-bottom: -58px; }
.container-in { margin-top: 164px; margin-bottom: 58px; }
2 番目のコンテナーは最初のコンテナー内にあり、各ページの実際のコンテンツを配置する場所です。
したがって、これは Firefox 4/5 で問題なく動作します。まったく問題はありません。意図したとおりです。クロムも大丈夫そうです。ただし、IE8では、.containerの負のマージンを無視しています（開発者ツールで確認しました）。コンテナーは .top の後に開始されるため、.container-in の余白のために、.top と .container-in の間に 164 ピクセルのギャップが生じます。
そして面白いことに、IE8 を IE7 互換モードに切り替えると、この問題は発生しなくなります。負のマージンは IE7 モードでは問題なく動作しますが、もちろん他の多くの機能が壊れるため、IE に互換モードを使用するように指示することはできません。
この問題を回避する方法/別のソリューションを使用してすべてのブラウザーで同じ効果を得る方法についてのアイデアはありますか (IE7 は必要ありません)。私は何か間違ったことをしていますか？
編集:いくつかの楽しみとゲームの後、負のマージンを負の top: 座標に置き換える (およびすべてのコンテナーを相対として設定する) ことで、IE8 で完全に動作することを発見しましたが、Firefox の html コンテナーの下に 222 ピクセルのギャップが残るようになりました (によると火虫）。混乱している！
EDIT2：技術的に言えば、ここで何が問題なのかを知っていると思います。Internet Explorer 8 は、負のマージンを「オーバーフロー」と見なし、overflow: hidden であるため、マージンを無効にします。overflow: hidden を削除すると、この動作はなくなりますが、デザインの残りの部分が壊れます。誰にもまだアイデアがありますか？