IE7 の他のページ要素の下に YUI オートコンプリートがレンダリングされる
https://stackoverflow.com/questions/88883
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私は現在、例を使用してセクシーな影や角などでスタイルされたボックスの列を持つページに取り組んでいます。 ここ. 。正直に言うと、CSS がどのように機能するのか完全には理解していませんが、 見た目 素晴らしい。
一番上のボックス内には、検索に使用されるテキスト タイプの入力があります。その検索ボックスは YUI オートコンプリート ウィジェット。
Mac の Firefox3、Windows の FF2、Mac の Safari ではすべて正常に動作します。WinXP 上の IE7 では、オートコンプリートの候補が角の丸いボックスの下にレンダリングされ、最初の 1 つを除いてすべて読めなくなります (ただし、ボックスの間から十分に覗いているのがまだ確認できるので、IE7 が実際に複数の候補を取得していることに満足しています)。
問題を解決するにはどこから始めればよいでしょうか?
WinXP 上の FF2 で成功すると次のようになります。
IE7 での失敗は次のようになります。
解決 2
私が最終的に実装した実用的なソリューションは、読書に基づいていました この説明 何度も何度も。
基礎となる HTML では、青い角の丸い要素はすべて DIV であり、すべて兄弟 (すべて同じ DIV の子) です。
オートコンプリート div 自体 (角の丸いコンテナ div の玄孫) の z-index は任意に高くすることができますが、IE は基本的に検索の内容全体をレンダリングしていたため、この問題は解決されません。箱 下に 「Vital Stats」ボックスの内容全体。両方ともデフォルトの Z-index があり、Vital Stats は 後で HTML内で。
秘訣は、これらの兄弟 DIV (青い角の丸いコンテナ) のそれぞれに降順の Z インデックスを与え、それらすべてに Position:relative をマークすることでした。したがって、検索ボックスを含む青い div は z-index:60、「Vital Stats」ボックスは z-index:50、「Tags」は z-index:40 などとなります。
したがって、より一般的には、重複している要素と重複している要素の両方の共通の祖先を見つけます。共通の祖先の直接の子に、コンテンツを表示したい順序で Z インデックスを適用します。
他のヒント
ジェレミー
大変遅くなってしまい申し訳ありませんが、その回答が将来のプロジェクトに役立つことを願っています。
ここでの問題は、position:relative を持つ要素があると常に IE が新しい重なり順を作成することです。これは、z-index 自体が唯一の制御要素ではないことを意味します。詳細については、こちらをご覧ください。
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
問題を解決するには、私が問題を正しく理解している場合は、オートコンプリート実装全体をラップするコンテナーにposition:relativeを適用します(その後、結果コンテナーにposition:absoluteを適用します)。これにより、IE でこれらの要素に対して独立したスタック順序が作成され、ページ内で後から表示される他の位置、つまり相対スタックの上にそれらの要素をフローティングできるようになります。
よろしく、エリック
私はそうではありません 完全に 問題の原因となっている設定を理解する必要がありますが、YUI Autocomplete オブジェクトの useIFrame プロパティを調べてみるのもよいでしょう。このプロパティは、オートコンプリート フィールドの下に iframe オブジェクトを重ねて、フィールドを隠しているオブジェクトの上にフィールドを浮かせることができます。 IEのバグだらけのレイアウト。
http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#property_useIFrame
ただし、ドキュメントには、これは 5.5 < IE < 7 で問題になると記載されているため、これはあなたが経験している問題ではない可能性があります。繰り返しになりますが、使用している設定を完全に理解していなくても、さまざまな設定を試してみることもできます。 Zインデックス オートコンプリート フィールドと周囲のブロック レベル要素の値。
オートコンプリート div の z-index が、角の丸いボックスを構成する div より大きい数値であることを確認してください。Microsoft は、上位要素の z-index を 20000 または 100000 に設定していると思います。同じことをするのが賢明かもしれません。
これと同様の問題があり、基本的にさまざまな div の z-index を変更するだけで修正しました。表示する順序で各 div に大きな数値を設定するだけです。
