2012-02-06 11 views
2

私はFancyboxを使ってiframeを開き、ie以外のすべてのブラウザで問題なく動作します。Fancyboxは読み込み後、右下に数ピクセル移動します

iframeを開くと、1秒ごとにずれているように見えます。次に、モーダルボックスを右に、数ピクセル下に移動します。

私はいくつかの人々の投稿に出くわしましたが、彼らの答えは助けになりませんでした。

私もCSSで成功しませんでした。

これまで誰もがこのようなことを見つけましたか?

乾杯!

+0

この場合、リンクを表示すると非常に便利だと思います。 – JFK

+0

私の悪いサイト(http://www.mytrak.com/homevideos.aspx)、私たちはDNNで働いています。不思議。私はそれがnivo(上記のヘッダーで使用されている)によって呼び出されているjと関係があるかもしれないと推測していますが、私はそれを解決するのに十分な精通ではありません。 – emidesigns

+0

私はまだDOCTYPEの問題だと思う、私の更新を参照してください – JFK

答えて

0

Fancyboxは、特にIEで正しく動作するには、適切なDOCTYPEが必要です。あなたのサイトは現在quirks modeで稼働しています。

DOCTYPEの参照hereが見つかりました。あなたの特定のケースで

、あなたはこの

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

UPDATEすることにより、この

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

を変更してみてください可能性があります。私はIEで問題を再現するためにいくつかの簡単なhtmlページを作成しました。

最初のものは、あなたのページのものと同じfancyboxコードと同じDOCTYPEを使用します。 fancyboxがあなたのページのように奇妙な振る舞いので、IEはQuirksモードで動作します: http://picssel.com/playground/jquery/ieWrongDoctype_09feb12.html

秒1は、解決策として提案DOCTYPEを使用しています。 http://picssel.com/playground/jquery/ieGoodDoctype_09feb12.html

私の結論:IEは正常に動作する標準モードとfancyboxで動作し、正しいDOCTYPE

+0

こんにちはJFK、あなたの応答に感謝します。私は無駄にDOCTYPEを変更しようとしました。コードをローカルでテストしたところ、IE上で完全に動作し、DNNの問題だと思うようになりました。私は他の解決策を試し続けてみんなに知らせる。 – emidesigns

1

Fancyboxは特別にIEで、正しく動作するために適切なDOCTYPEを必要とする使用します。あなたのサイトは現在、quirksモードで動作しています。

ここでは、動作中のDOCTYPEリファレンスを見つけることができます。あなたの特定のケースで、この

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

によって

、あなたはこの

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
12

が私の解決策はまだ同じ問題に直面して誰にも役立つことを願って変えてみても...私はfancyboxを使用 1.xと私のDOCTYPEは "html"です。

実際には、box-sizing: border-box;のスタイルをリセットして問題が発生していました。そこで、#fancybox-content#fancybox-wrapについてcontent-boxに戻し、fancyboxが正常に動作するようになりました。

+0

基本的なCSSを探している人には、あなたのスタイルに貼り付けるものがあります: '#fancybox-wrap、#fancybox-content {box-sizing:content-box; } ' – jg314

+0

このCSSは美しく私のためにそれを修正しました。ありがとう! –

+0

'#fbplus-wrap {ボックスサイズ:content-box; }#fbplus-content {ボックスサイズ:content-box; } ** fancyboxを[** angle-fancybox-plus **](https://github.com/igorlino/angular-fancybox-plus)として使用している場合は、元のCSSの後継のどこにでも配置してください。 – davidkonrad

関連する問題