问题
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