1

私は今、セクシーな影とコーナーでスタイル設定されたボックスの列を持つページに取り組んでおり、ここの例を使用していません。正直なところ、CSS がどのように機能するかは完全には理解できていませんが、見た目は素晴らしいです。

最上部のボックス内には、検索に使用されるテキスト タイプの入力があります。この検索ボックスは、YUI オートコンプリートウィジェットに接続されています。

Mac の Firefox3、Windows の FF2、Mac の Safari ではすべて正常に動作します。WinXP 上の IE7 では、オートコンプリートの提案が角の丸いボックスの下にレンダリングされ、最初の 1 つを除くすべてが判読不能になります (ただし、IE7 が実際に複数の提案を取得していることに満足しているボックス間で十分な覗き見を見ることができます)。

問題を修正するには、どこから始めればよいでしょうか?

WinXP 上の FF2 での成功は次のようになります。

代替テキスト

IE7 での失敗は次のようになります。

代替テキスト

4

5 に答える 5

5

ジェレミー、

これが遅すぎて申し訳ありませんが、うまくいけば、答えは将来のプロジェクトであなたに役立つでしょう。

ここでの問題は、position：relativeを持つ要素があるときはいつでも、IEが新しいスタック順序を作成することです。つまり、z-index自体が唯一の制御要素ではありません。あなたはここでこれについてもっと読むことができます：

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

問題を解決するには、問題を正しく理解している場合は、オートコンプリートの実装全体をラップするコンテナーに対してposition：relativeを適用します（次に、結果コンテナーに対してposition：absoluteを適用します）。これにより、IEで、ページの後半に表示される他の位置（相対スタック）の上に浮かぶことができる要素の独立したスタック順序が作成されます。

よろしく、エリック

于 2008-12-11T06:28:27.780 に答える
4

私が最終的に実装した実用的なソリューションは、この説明を何度も読んだことに基づいていました。

基礎となる HTML では、青い角の丸い要素はすべて DIV であり、すべて兄弟 (同じ DIV のすべての子) です。

オートコンプリート div 自体の z-index (丸みを帯びたコーナー コンテナー div のひ孫) は任意に高くなる可能性があり、IE は基本的に検索のコンテンツ全体をレンダリングしていたため、この問題は修正されません。どちらもデフォルトの z-index を持ち、Vital Stats はHTML の後半にあったため、「Vital Stats」ボックスのコンテンツ全体の下にあるボックス。

トリックは、これらの兄弟 DIV (青色の丸い角のコンテナー) のそれぞれに降順の z インデックスを与え、それらすべてに position:relative のマークを付けることでした。したがって、検索ボックスを含む青い div は z-index:60、[Vital Stats] ボックスは z-index:50、[Tags] は z-index:40 などです。

したがって、より一般的には、重複している要素と重複している要素の両方の共通の祖先を見つけます。共通の祖先の直接の子に、コンテンツを表示する順序で z-index を適用します。

于 2009-08-26T17:13:22.157 に答える
1

オートコンプリートdivのz-indexが、丸みを帯びたコーナーボックスを構成するdivよりも大きい数値であることを確認してください。Microsoftは、上位の要素のz-indexを20000または100000に設定していると思います。同じことをするのが賢明かもしれません。

于 2008-09-18T00:34:46.270 に答える
1

これと同様の問題がありました。基本的に、さまざまな div の z-index を変更するだけで修正しました。表示する順序で各 div の数値を高く設定するだけです。

于 2009-02-18T00:05:31.010 に答える
1

問題の原因となっているセットアップを完全には理解していませんが、YUI オートコンプリート オブジェクトの useIFrame プロパティを調べることをお勧めします。このプロパティは、オートコンプリート フィールドの下に iframe オブジェクトをレイヤー化して、フィールドをオブジェクトの上に浮かせるようにします。 IEのバグのあるレイアウトでそれを覆い隠しています。

http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html#property_useIFrame

しかし、ドキュメントによると、これは 5.5 < IE < 7 で問題になるため、発生している問題ではない可能性があります。繰り返しになりますが、使用しているセットアップを完全に理解していなくても、オートコンプリート フィールドと周囲のブロック レベル要素のさまざまなz-index値を試してみることもできます。

于 2008-09-18T00:28:04.353 に答える