1

以下をチェックしてください：

http://jsfiddle.net/symposion/P8KBe/7/

IE8で、次にChrome / Firefox /IE9+で。IE8では、それだけである#slicerにもかかわらず、内側の青いdivが最も外側のdivの端で切り取られていることに気付くでしょう。on #outerを明示的に変更すると、問題は解決します。#outeroverflow:hiddenmin-heightheight

この例は不自然に思えるかもしれませんが、ここで単純化したからです。私は実際のプロジェクトでこれに遭遇しましたが、使用されているレイアウトの原則を変更する範囲が限られているため、頭痛の種になっています。他の依存関係が多すぎます。私はここで2つのことを探しています：

  1. これはどこかにリストされている既知のバグですか？問題の最も簡単なステートメントは何ですか？私はまだIE8がこれを間違える原因となっている根本的なエラーを本当に理解しているとは感じていません。それはまだ特に単純なテストケースではありません。

  2. #outerおよびのスタイルを変更しない回避策はあり#slicerますか？私の実際の例では、これらは大きなページフレームワークの一部であり、変更するのに問題がありますが、#innerビットはより簡単に制御できます。

（更新）元の例は、最小限に抑えるために非常に工夫されています。ここで新しいJSFiddleを作成しました：http：//jsfiddle.net/symposion/NDa6U/これにより、実際の問題を少しよく見ることができます。IE8でHTMLペインのサイズを変更すると、最終的に緑色の内側のコンテンツセクションが正しく切り取られ始めます。私が探しているのは、このセクションが含まれているdivの高さの100％を維持することです。理想的には、以外に大きな変更を加える必要はありません#innerContainer。しかし、正直なところ、基本的なレイアウトの原則（定義されたピクセル位置からページの下部から定義された距離まで拡張されるが、最小の高さを持つ下部セクション）を維持するソリューションに興味があります。 IE8で。

4

1 に答える 1

1

http://jsfiddle.net/thirtydot/NDa6U/22/はどうですか？

#innerContainer {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}​

この手法に関する（比較的）古い背景情報は次のとおりです。http ：//www.positioniseverything.net/articles/onetruelayout/combined

個人的な経験から、それは問題なくすべての最新のブラウザで動作します。

于 2012-11-23T10:44:51.580 に答える