Question

我将fancybox 2插件添加到我的网站，当我在Chrome和Safari中测试它时，它运行正常，但在Firefox中则没有。页面加载正常，但是当您单击缩略图打开精美框时，我的body标签中的边距样式被取消（我使用firebug确定了这一点）并且我的整个布局完全转移到视口的右侧。单击精美框时，布局仍然向右推。有没有人有类似的问题，你会有任何关于如何解决它的提示吗？我已经发布了我的DOCTYPE并且随着我的身体css规则发出咆哮。如果需要更多信息，请告诉我。该网站尚未上线所以我无法链接到它。如果我错过任何明显的事情，我很新闻。非常感谢任何认为可以提供帮助的人！

<!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;
}

Answer 1

今天早上我实际上遇到了同样的问题。我使用的解决方案（可能有更好的选择）是创建一个div包裹身体内容并设置宽度，然后将身体宽度设置为100％;

<body>

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

</body>

CSS：

body { width: 100%; }

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

似乎解决了Firefox的问题，我们在没有任何问题的情况下将其测试回IE7。

在Firefox 16.0.1中启动fancybox时页面布局中断

1 个答案: