2011-09-19 29 views
6

私は、jQueryとCSSを多用してかなり良い効果を得るサイトを持っています。ページはFFやChromeで完璧に機能しますが、IE9(とIEの他のバージョン)では、ブラウザが私のposition:fixed;のプロパティを無視しているように見えます。私の質問は次のようなものだと思います。私は完全なコードの例がなければ言うことは難しいと知っていますが、誰もがこれを以前見たことがあるのだろうかと思っていました。 たくさんのCSSのがあるので、投稿に関連するものとそうでないものが本当にわからない。より多くのコードが必要な場合は、私に知らせてください。位置:IE9の固定ブレーク

例1:ツールバーを模倣ウィンドウスタートボタンメニュー

以下の例では、私はWindowsの[スタート]ボタンの動作を模倣するツールバーを実装しましたが表示されます。それは左下にあり、クリックすると展開してコンテンツを表示します。この機能はCh/FFでうまく機能していますが、IE9で見ることができるように、ツールバーとそのコンテンツはページの下部に追加されています。私は速くJSFiddleをこの方法をIE9で使用しました。これは正常に動作しているようです。私は、これが動作を停止させる原因となるドキュメントについて何が違うのか分かりません。正しく私はposition:absolute;にCSSを変更した場合、div要素が正しく配置されますと、機能の99% - それだけでページをスクロールしない:

奇妙なこと

Figure for Example 1

#floatingOptions{ 
    background:#fff; 
    border-right:2px solid #000; 
    border-bottom:2px solid #000; 
    bottom:0px; 
    display:none; /*this gets shown via javascript */ 
    left:0px; 
    overflow:hidden; 
    position:fixed; 
    width:250px;  
    z-index:99999; 

} 

例2:モーダルウィンドウ経由jQueryのツールオーバーレイ

私のモーダルウィンドウの多くは、jQuery Tools Overlayを使用して生成されます。これもCh/FFではうまくいきますが、IE9ではページの一番下にモーダルdivが追加されています(Zインデックスを無視しているように見えます)。

enter image description here

UPDATEはここで私はそれを考え出した

私のdoctype/HTML文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> 

ソリューションです。 POBKACエラーです(キーボードと椅子の間に問題が発生しました)。

<!DOCTYPE>が宣言される前に、そのスタイルは、コードの中に置かれていた

<style type="text/css"> 
    @import url(/themes/pn5/jquery.ui.all.css); 
    @import url(/qtip/jquery.qtip.css); 
</style> 
<?php include ('header.php'); ?> 

..私の<!DOCTYPE....>header.phpに呼び出されていると私は馬鹿であることと、一部のページでこれをやっていました。それを回して問題が解決されました。

ありがとうございました!

+0

[質問](http://stackoverflow.com/questions/6694517/ie9-and-position-fixed)、この質問には答えられないかもしれません。 – Alex

+0

@Alex:これはおそらく答えです。 – thirtydot

+0

私はそれがわからない。上記の更新を参照してください。私のdoctypeはそこにあります。 – Dutchie432

答えて

17

おそらく、ページがQuirks Modeに表示されている可能性があります。

Internet Explorerは、他のブラウザよりも、Quirksモードでページを台無しにします。

F12キーを押して開発者ツールを開き、使用されているモードを確認します。

それは確かにある場合は癖モード、最も可能性が高い理由は、あなたは非常に最初の行としてDOCTYPEを追加するために忘れてしまったということです。

<!DOCTYPE html> 

すでにDOCTYPEを持っている場合は、他の原因があります。

+0

ありがとう!ヘッダー情報の更新を参照してください... – Dutchie432

+1

あなたのdoctypeは問題ありませんので、Quirksモード(これは確信しています)は何か他のものによって引き起こされているはずです。 IEでDeveloper Toolsを起動するためにF12キーを押したとき、どの "ブラウザモード"/"ドキュメントモード"が使用されていますか? – thirtydot

+0

これは 'Quirks'を示しています - それが原因でデフォルトになるのは何ですか?私が 'IE9 Standards'に変更すると、再びうまく見えます。 – Dutchie432

2

他のブラウザでも動作し、IEで動作しない場合は、まずIEが厳密なモードでページを表示しないと思われます。

IEでの固定配置は、厳密モードでのみ機能します。

details on MSDNを参照してください。