Fancybox shifts to the right and down a few pixels after loading

痞子三分冷 提交于 2019-12-10 09:40:42

问题


I'm using Fancybox to open an iframe and it works fine in all browsers except for ie.

When ie opens the iframe it seems to stagger for a split second and then it shifts the modal box to the right and down a few pixels.

I came across a few people's posts but their answers didn't help.

I also played around with the CSS with no success.

Anyone came across anything like this before?

Cheers!


回答1:


Hope my solution will help to anyone who still face the same issue... I use fancybox 1.x and my DOCTYPE is "html".

I've found that actually the issue was in using box-sizing: border-box; in styles reset. So I switched it back to content-box for #fancybox-content and #fancybox-wrap and fancybox started to work properly.




回答2:


Fancybox needs a proper DOCTYPE to work correctly, specially with IE. Your site is currently running in quirks mode.

You can find a working DOCTYPE reference here.

by this

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

In your particular case, you may try changing this

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



回答3:


Fancybox needs a proper DOCTYPE to work correctly, specially with IE. Your site is currently running in quirks mode.

You can find a working DOCTYPE reference here.

In your particular case, you may try changing this

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

by this

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

UPDATE : I have created some simple html pages to reproduce the issue with IE.

The first one uses the same DOCTYPE as in your page as well as the same fancybox code. IE works in quirks mode so fancybox behaves oddly as in your page: http://picssel.com/playground/jquery/ieWrongDoctype_09feb12.html

The second one uses the proposed DOCTYPE as solution. IE works in standards mode and fancybox works properly: http://picssel.com/playground/jquery/ieGoodDoctype_09feb12.html

My conclusion: use the correct DOCTYPE



来源:https://stackoverflow.com/questions/9166814/fancybox-shifts-to-the-right-and-down-a-few-pixels-after-loading

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!