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在加载后向右和向下移动几个像素

回答

相关问题