Fancybox在加載後向右和向下移動幾個像素

我正在使用Fancybox打開iframe，並且它在所有瀏覽器（除ie外）都可以正常工作。Fancybox在加載後向右和向下移動幾個像素

當ie打開iframe時，它似乎錯開了一秒鐘，然後它將模式框向右和向下移動幾個像素。

我遇到了幾個人的帖子，但他們的回答沒有幫助。

我也玩過CSS而沒有成功。

之前有人遇到過這樣的事情嗎？

乾杯！

來源

2012-02-06 emidesigns

我想在這種情況下，如果你顯示一個鏈接 – JFK 2012-02-08 06:47:37

我的壞（http://www.mytrak.com/homevideos.aspx），我們正在DNN工作，當我在本地測試Fancybox的作品奇蹟。我猜測它可能與nivo調用的js（在上面的頭文件中使用）有關，但我不夠精通以解決這個問題。 – emidesigns 2012-02-08 14:22:59

我仍然認爲是DOCTYPE問題，請參閱我的更新 – JFK 2012-02-10 06:14:24

Fancybox需要一個合適的DOCTYPE才能正常工作，特別是IE。您的網站正在運行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">

：我創建了一些簡單的html頁重現該問題與IE瀏覽器。

第一個使用與您的頁面相同的DOCTYPE以及相同的fancybox代碼。 IE工作在怪癖模式，這樣的fancybox奇怪的行爲就像在你的頁面： http://picssel.com/playground/jquery/ieWrongDoctype_09feb12.html

第二個使用提出DOCTYPE的解決方案。 IE工作在標準模式和的fancybox正常工作： http://picssel.com/playground/jquery/ieGoodDoctype_09feb12.html

我的結論：使用正確的DOCTYPE

來源

2012-02-09 00:03:41 JFK

嗨JFK，感謝您的回覆。我試圖改變DOCTYPE無濟於事。我在本地測試了代碼，它完全適用於IE，這導致我認爲這是一個DNN問題。我會繼續嘗試其他解決方案並讓每個人都知道。 – emidesigns 2012-02-09 21:47:36

的fancybox需要一個適當的DOCTYPE才能正常工作，特別是與IE瀏覽器。您的網站目前正以怪癖模式運行。

你可以在這裏找到一個可用的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">

來源

2012-07-26 04:06:19 JFK

希望我的解決方案將幫助任何人誰仍然面臨着同樣的問題......我使用的fancybox 1.x和我的DOCTYPE是「html」。

我發現實際上問題是在樣式重置中使用box-sizing: border-box;。所以我把它切換回content-box爲#fancybox-content和#fancybox-wrap和fancybox開始正常工作。

來源

2014-02-05 08:04:46

對於那些尋找一些基本的CSS，這裏是你要粘貼到你的樣式： '＃fancybox-wrap，＃fancybox-content {box-sizing：content-box; }' – jg314 2015-08-07 01:47:32

這個CSS修復了我的漂亮。謝謝！ – 2016-06-12 18:42:31

或'＃fbplus-wrap {box-sizing：content-box; }＃fbplus-content {box-sizing：content-box; }'如果你使用fancybox作爲[** angular-fancybox-plus **]（https://github.com/igorlino/angular-fancybox-plus）。只需將它放在原始CSS的任何位置即可。 – davidkonrad 2017-05-08 00:08:14

Fancybox在加載後向右和向下移動幾個像素

回答

相關問題