3

次の HTML を検討してください。

<div style = "overflow: hidden; height: 5em" id = "selections-outer-wrapper">
    <div id = "selections-inner-wrapper" style = "position: relative">
        <ul style = "text-align:left; width: 12em;">
             <!---- LOTS OF LI ELEMENTS GO HERE ---->
        </ul>
    </div>
</div>

5emここでの私の意図は、最も外側の DIV 内にあるものは、高さが超えている場合は非表示 (クリップ) にする必要があるということです。(それが style 属性の目的overflow: hiddenです。) Firefox または Webkit ベースのブラウザーを使用してこの HTML をレンダリングすると、内部コンテンツが正しくクリップされます。

jsfiddle リンク: http://jsfiddle.net/Q82N9/

Firefox でのスクリーンショット:

ここに画像の説明を入力

ただし、IE-7 では正しく動作しません。 (驚き、驚き) 何らかの理由で、プロパティULにもかかわらず、内側の要素が切り取られません。overflow: hidden

IE-7 のスクリーンショット:

ここに画像の説明を入力

問題はposition: relative、内部 DIV のスタイル属性にあるようです。そのスタイル属性を削除すると、IE-7 で正常に動作します。relativeただし、私が使用している特定の Javascript コードは、上下にスクロールするために位置があると想定しているため、内部 DIV に位置が必要です。

質問:では、これが IE-7 で動作しない理由はありますか? これはよく知られた問題で、回避策はありますか? または、IE-7 は実際に正しいことを行っており、何らかの理由で相対的に配置されたノードプロパティhiddenを使用overflow

4

1 に答える 1