問題タブ [haslayout]

タイトルが示すように、基本的に何が起こっているかは次のとおりです。

ユーザーの操作に応じて、いくつかの作業を行います。JSON を要求し、要素を構築し、その要素を「コンテナー」div に追加します。結果は次のようになります。

これが何が起こるかです。これに子が追加され、親の高さを超える場合。親が消える。

私は「hasLayout」とそのすべてのジャズを追求しましたが、何も機能しません。

うまくいくのは、子供たちが同じサイズかそれよりも小さい場合ですが、私が達成しようとしていることの性質上、これは望ましくありません。また、子供たちが小さくなることを保証することもできません.

height:auto機能しませんが、最大の子よりも大きな値を設定するとこれが修正されますが、レイアウトが歪んでしまいます

前もって感謝します。

編集: 画像は、JSON と遅延キューの組み合わせを介して読み込まれます。それらは、コンテナ要素に追加する前にロードされることが保証されています。

基本的 ：

すべてのクロムとFFで正常に動作します

edit2:「コンテナ」オブジェクト自体が本体に追加される前と後の両方に画像を追加しようとしました。どちらも期待される結果を生成しません。

編集 3: * IE7 と IE9 は上記のように動作しません。これはIE 8専用です*

次の条件が満たされている場合、設定zoom:1すると要素のコンテンツが非表示になります。

1. マークアップは次の構造である必要があります。

   /li>

2. これらのスタイルを定義する必要があります。

   /li>

3. このクラスは、ページの読み込み後（ボタンのクリックなど）に、somethingSPECIAL上記のマークアップのすべての祖先に適用する必要があります。

4. 使用を強制されたブラウザは、互換表示でIE8である必要があります。

これがライブデモです。

なぜこれが起こっているのですか、そしてそれを防ぐために私は何ができますか？（私は取り除くことができませんzoom: 1。デモに示されているように親クラスも設定する必要があります。）

ヘッダーテキストを持つアコーディオンタイプのものがあります。開いているときは 1 つのパディングがあり、閉じているときは別のパディングがあります。すべてのパネルは、開いたスタイルから始まり、JS によって閉じられます。ChromeとSafariでは、ヘッダー テキストに閉じたパディングが適用されていません。

インスペクターで表示すると、正しい (開いた) パディングが適用されていることが示され、インスペクターで実際の要素をクリックすると、パディングがどこにあるのかがわかります。

それを適用または「描画」する唯一の方法 (それが正しい用語である場合) は、そのヘッダー テキストまたはそのパネル内で 任意のスタイルを切り替える (または追加する) ことです。

また、インスペクターを介してインラインスタイルとしてパディングを追加すると、それも適用されず、トグルしても変更されないことも発見しました。

これはIEの「hasLayout」の問題と非常によく似ているようですが、同様のエラーを参照しているものは見つかりません。さらにテストするためのアイデアや修正方法はありますか?

この問題を単純な jsfiddle で再現することはできないようです。また、私が取り組んでいるプロジェクトは大規模であるため、問題を引き起こしているコードのチャンクを次に示します。

CSS

HTML

このページに出くわしたとき、コンパスのオンラインリファレンスを調べていました: http://compass-style.org/reference/compass/utilities/general/hacks/

このページには、IE の has-layout ハックを実装する 2 つの方法があるようです。そのうちの 1 人が を設定しzoom: 1;、もう1 人が を設定display: inline-block;し、再び設定しdisplay: block;ます。

マニュアルで説明されていないのは、これら2つの違いは何ですか。

違いはありますか？どちらか一方を使用したい特定の状況はありますか?

サイトで IcoMoon アイコンを使用していますが、最新のすべてのブラウザーで完全に機能しますが、Internet Explorer 7ではまったく機能せず、 Internet Explorer 8 では小さなボックスとして表示されます。CSS は次のとおりです。これは、フォントへの相対パスを除いて、IcoMoon からのものです。

ナビゲーションにアイコンを表示するために data-icon 属性 (例:<li data-icon="&#xe003;"><a hrefなど) を使用しています。

問題は何でしょうか？

問題position: relative / absolute / fixed私はIE7で動作さ せるために多くのことを試みました。私は今これを解決することはできません。

.levelTwoを持っている要素であり、を持ってpos: abいる.levelOne要素ですpos: rel。

したがって、望ましい結果は、他の要素の上/前にある.levelTwo要素になります。現在、彼らは後ろに座っています.levelOne a

マークアップ

CSS

望ましい

壊れた

これが私のフィドルです：http： //jsfiddle.net/hutber/2GvA4/

下の画像は、私が直面している問題の簡略版です。#customとは両方とも#ext-ct手作業でコーディングされています。ExtJS コンポーネントは にレンダリングされ#ext-ctます。次に、 CSS プロパティ#customで再生を切り替えます。displayIE7 では、表示#customするとコンポーネントが初期位置に固定され、非表示#customにするとコンポーネントが上に移動します。

このバグを jsFiddle で再現しようとしましたが、うまくいきませんでした。私はすでに有名な「hasLayout」の概念を知っているので、に適用しようとしましzoom:1たが、このソリューション#customを試してもまだ失敗しました。誰かがすでにこのような状況に遭遇したことがありますか? コンポーネントを強制的にコンテナに貼り付ける簡単な修正方法はありますか?

さて、私は困惑しています。

IE9は、開発中のサイトのすべてではありませんが、一部のページで一貫性のないページ幅の問題を表示しています。

IE9の場合： http ： //sistercarmen.org/cms/にアクセスすると、右のページのように大まかに見えるものを確認できます。実際、ページが少し広すぎて、それは確かに問題です。しかし、 AboutページやHistoryページで起こっていることと同じようなものはありません。

それらのページでは、ページは確かに非常に広くなります。ただし、右側の列のリンクにマウスを合わせると（おそらく、水平方向にスクロールして表示する必要があります）、ページは正しいサイズに戻ります。

簡略化されたテストページ@jsFiddleを作成すると、これが関連しているように見えることを確認できましたdisplay: tableが、これは私にとって重要なので、後でソースコードでNavを提供できます。さらに単純なテストページdisplay:tableは、IE9で一般的に機能することを示しています。

だから...これはhasLayoutの問題ですか？もしそうなら、IE9でhasLayoutを強制するにはどうすればよいですか？

どうもありがとうございます、

ジェレミー

私はクライアント用の IE8 を開発しています。css 設定が機能しない (例: word-wrap) ことが定期的に発生し、よくある理由を調査すると、hasLayout = true (resp. zoom=1) 属性がタグに設定されていません。デフォルトのスタイルシート zoom=1 を事前に設定しておけば、この問題はもう実行されないと思いましたか? それに反対するものはありますか？考慮されるすべてのタグにデフォルトで zoom=1 属性が設定されている場合、他の潜在的な問題はありますか? 助けていただければ幸いです。

HTML:

CSS:

Javascript

jsbin jsfiddle

不透明度が機能していないため、コンソールで「false」を取得する必要があります (IE7&8 の場合) が、結果は「true」です。

要素は本当に「hasLayout」ですが、他の理由で不透明度が機能していませんか?

jQueryでさえ不透明度を設定できないので、私はそれを疑います。