IE9の親コンテナがオーバーフローした際に子コンテナのステータスが変化することでスクロールバーの下に余分なスペースが発生する問題についての議論:auto_html/css_WEB-ITnose

IEがアップデートされるたびに、変なバグが発生するのですが、それを黙って耐えています。

この問題はプロジェクト内で1週間近く私を悩ませてきましたので、ここに記録します。下の例を見てください

    <style>    .panel{        width: 200px;        overflow: auto;        background-color: #f00;    }    .inner{        width: 250px;        background-color: #ff0;    }    </style>    <div class="panel">        <div class="inner">            <input type="checkbox" />        </div>    </div>

IE9での表示効果は

次にチェックボックスをクリックすると、表示効果は次のようになります

余分な赤い背景の部分がありますが、これは明らかに、親コンテナ.パネル。サブコンテナ内のラベルのステータス、値、内容を変更するか、sub-container.inner のラベル属性を変更する (クラスの変更など) 限り、試してみることができます。親container.pannelのスクロールバーの下のスペースを増やします。

例えば、.inner要素にclass: aaaを追加します。効果は以下の通りです

別の例をテストし、入力に値を追加します

ということで、前回のテスト結果を踏まえてまとめてみます。

表示例外の必要条件:

1. 親コンテナの CSS は CSS スタイル overflow-x:auto です (自分で試すことができます。overflow-y は機能しません)。

2. サブコンテナおよびサブコンテナの子孫ノードは、ステータス、値、コンテンツ、属性などに変更を加えます。

解決策:

親コンテナの高さに関連するCSSスタイルの値を設定します。主に 3 つの関連プロパティがあり、いずれかに設定できます。

高さ: pxまたは%に設定できます。たとえば、「height:100%」

min-height: は % にのみ設定でき、これが推奨されます。たとえば、「min-height:0%」です。

max-height: % にのみ設定できます。たとえば、「max-height:100%」などです。

このバグは他の人からも報告されており、 http://social.microsoft.com/Forums/id-ID/1c239c1d-84d2-461b-991d-d7834edaa121/ie9bug?forum=267

を参照してください。

この記事が良いと思ったら右下の【おすすめ】をクリックしてください！