Page Layout Breaks When fancybox Initiated in Firefox 16.0.1

问题

I added the fancybox 2 plugin to my site and it works fine when I test it in Chrome and Safari, but in Firefox it doesn't. The page loads fine, but when you click on a thumbnail to open fancy box, the margin styles in my body tag are cancelled (I determined this using firebug) and my whole layout shifts entirely to the right side of the viewport. When you click out of fancy box the layout remains pushed to the right. Has anyone had a similar problem and would you have any tips on how to fix it? I've posted my DOCTYPE and head bellow along with my css rules for the body. If more info is needed let me know. The site is not yet up so I can't link to it. I'm new to this so sorry if I've missed anything obvious. Thanks so much to anyone who thinks they can help!!

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Commercial</title>
<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet'       type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="styles/commercial_new.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Scripts/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.pack.js"></script>
<link href="Scripts/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.css" rel="stylesheet" type="text/css">
</head>


body {
    width: 1050px;
    background: #c7c7c7;
    margin: 0 auto;
    overflow: scroll;
}

回答1:

I actually had this same problem this morning. The solution I went with (there's probably a better option) is to create a div wrapping the body content and set the width on that, then set the body width to 100%;

<body>

   <div id="container">
       // Page content
   </div>

</body>

CSS:

body { width: 100%; }

#container { width: 1050px; margin: 0 auto; }

Seemed to fix issues with Firefox, and we tested it back to IE7 without any issues.

来源：https://stackoverflow.com/questions/13056039/page-layout-breaks-when-fancybox-initiated-in-firefox-16-0-1

标签

javascript

jquery

css

firefox

fancybox