2009-06-09 8 views
0

私はiframeとDHTMLカレンダーウィジェットを含むWebページを持っています。ページは正しく表示され、iframe内のコンテンツも表示されます。問題は、カレンダーの一部がiframeによって隠されているiframeに十分近い位置にあるカレンダーをアクティブにするときです。IE 7のiframeのカレンダーウィジェットの位置

javascriptとCSS(Zindex、z-index)の両方を使用してiframeの位置を操作しようとしましたが、iframeは常にページの一番上のレイヤーとして表示され、親DHTMLコンテンツがiframeと同じ領域。また、DHTMLカレンダーのCSSを値> 0に変更し、高いZ-インデックス値を持つdiv/spanでウィジェットのスクリプレットをラップしましたが、運はありません。

答えて

0

iframeのZ-インデックスはIEによってaweirdwayで処理されます。あなたがそれを取り除くことができるなら、私はあなたが行うことをお勧めし、通常のDivにコンテンツを埋め込むだけです。

これ以外の選択肢がない場合は、IE6のような要素のZ-インデックスが無限になることに注意してください。ですから、それをスタックする方法は、より高いzindexを持つiframeを使用することです。その結果、無限大対無限大+ 1になります。

この例は、vs stackingです。両方とも無限のz-インデックスを持っていますが、それらを積み重ねることができます。 Checkout Stu Nicholls code、それは役に立つかもしれません。

これはかなり悪い考えですが、私の修正はこの領域に他のフィールドがないようにすることです。

0

あなたは間違いなくdivでiFrameをカバーすることができます。

位置:相対、位置:絶対、位置:カレンダーのdivで固定し​​ない限り、Z-インデックスは使用できません。

あなたがしたいのは、カレンダーの「位置」CSSプロパティを「相対」に変更することです。 iFrameに通常の静的配置がある場合(特別な配置を追加しなかったことを意味します)、

iFrameに「絶対的な」位置付けがある場合は、カレンダーで「位置:絶対」を行う必要があります。

参照リンク:http://resopollution.com/test/test.html

(IE6を含むすべての近代的なブラウザで動作)

+0

"あなたは間違いなく、div要素でiFrameをカバーすることができます。"私はそれがIE6でうまくいくのではないかと思う。 – marcgg

+0

上記の私の投稿を例のリンクと共に編集しました。それはIE6と7で動作します。 – resopollution

+0

それは動作します、私はdidn; t絶対的な位置についての部分を参照してください。私はすべてが絶対的なポジションを取っていることは良いことだと思っているのではないかと疑う。 – marcgg

0

Googleの「IEのZインデックスのバグ」の例と同様の問題の解決策のさまざまな。 htmlの仕様では、z-indexは絶対値でなければならないと述べていますが、IEでは、親要素が配置されている場合、その要素について決定できます。極端な状況では、私は問題を引き起こしている要素からDOMツリーを追跡し、親要素がどこにあるかにかかわらずz-index属性を設定しなければなりません(隠されている要素ではなく-index set)。 IE Developerのツールバーは、本当に混乱している場合は動的デバッグに役立ちます。正しく見えるようになるまで、ツリーの上にZ-インデックスプロパティを設定してください。

0

MSXMLとIEがXML文書をどのように変換するかに問題があるように思えました。 XMLには、ブラウザがXMLドキュメントを変換するために使用するXSLTスタイルシートの関連付けがあります。変換の出力はHTMLドキュメントです。 HTMLは最終的にレンダリングされるものなので、私のHTTPレスポンスがXMLであることを公開するのはインポートではないと思ったが、それは問題ではない。 IFRAMEのソースがHTMLドキュメントの場合、すべて正常に動作します。 DHTMLはIFRAMEの対象外です。しかし、MSXMLを使用してIFRAMEコンテンツを変換すると、問題が発生します。以下は、問題を説明するいくつかのサンプルファイルです。 DHTMLコンポーネントの場合、私はspiffycalendarウィジェットを使用していますが、どのDHTML要素も同じ結果を生み出すと思います。

PARENT.HTML

IFRAME DHTML CONFLICT例

   var pickupdate=new ctlSpiffyCalendarBox("pickupdate", "mainF", "PICKUP_DATE","btnDate1","",1); 
      </script> 

親ウィンドウ   分野 分野 FIELDpickupdate.writeControl()。 FIELD FIELD FIELD 変更の保存

Iframe.htmlの

IFRAME.XSL ]> テストXML DOC IFRAMEのCONTENT

+0

サンプルを添付する方法がわかりませんか? –