0

使用: jQuery 1.7.1

IE8 で、hide() と show() を使用して内部の子要素 ​​(UL) を非表示/表示するときに、高さを正しく計算できないコンテナ div があるという問題が発生しています。

このコンテナー div は、モジュールのコンテンツをラップするモジュール本体です。モジュール内の何かがモジュールの高さ/幅を調整する必要があるたびに、モジュールには refresh メソッドが呼び出される必要があります。これは、モジュールを正しくレンダリングするために高さを固定する必要があるためです。コンテナ div の高さを取得することでこれを行いますが、IE で内部セクションを展開または折りたたむと、コンテナ div はその高さを再計算しません。

すべての hide() show() を .addClass("display-none") / .removeClass("display-none") (ここで .display-none{display:none;}) に置き換えると、修正されることがわかりましたこの問題。ただし、表示と非表示を引き続き使用できるcssソリューション、いくつかのルール、または知らないIEの問題/ハックを望んでいました。

私が聞きたい質問は、なぜですか？

ここにいくつかの詳細があります。

  1. 私が非表示にして表示しているアイテムは、ネストされた順序付けられていないリストで構成されている社内で構築されたツリー ウィジェットからのノードのグループです。別名、非表示と表示が<ul>s に適用されています。
  2. ツリーノードで要素を非表示および表示する別のアクションがあります。このアクションにより、コンテナー div がその高さを正しく再計算します。
  3. ツリーをラップする他の div は正しく再計算され、何らかの理由でコンテナー div でバブリングが停止します。

コード サンプルまたは HTML サンプルが役立つ場合は、それも提供できますが、私が遭遇したことについて、より一般的な概念を誰かがたまたま持っているかどうかを確認したいと思っています。

コンテナのスタイルは次のとおりです。

.module > div > div > * {
    word-spacing: normal;
}

.module-content-data {
    max-width: 962px;
    padding: 10px 10px 0;
}

* {
    margin: 0;
}

.module {
    word-spacing: -1em;
}

Inherited fromdiv.main
.main {
    word-spacing: -1em;
}

Inherited frombody
body {
    color: #333333;
    font-family: Arial,Calibri,Verdana,Helvetica,Sans-Serif;
    font-size: 11px;
}
4

1 に答える 1

0

私は最終的にこれに対する解決策を見つけましたが、まだ理由を突き止めていません。どうやら IE8 では $.hide() と $.show が計算された高さを正しく設定しない場合があります。ただし、代わりに addClass("display-none") 呼び出しを使用するようにメソッドを変更し、高さを正しく計算しました。これが、同様の問題を抱えている他の人に役立つことを願っています。

更新: この同じ問題を抱えた別のページでは、上記の「修正」は効果がありませんでした。だからまだわからない。詳細がわかり次第更新します。

于 2012-08-02T21:35:01.800 に答える