1

我在我的网站上添加了 fancybox 2 插件，当我在 Chrome 和 Safari 中测试它时它工作正常，但在 Firefox 中却没有。页面加载正常，但是当您单击缩略图打开精美框时，我的正文标记中的边距样式被取消（我使用萤火虫确定了这一点）并且我的整个布局完全转移到视口的右侧。当您单击花哨的框时，布局仍然被推到右侧。有没有人遇到过类似的问题，您对如何解决它有什么建议吗？我已经发布了我的 DOCTYPE 和 head bellow 以及我的身体 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;
}
4

1 回答 1

4

我今天早上实际上遇到了同样的问题。我采用的解决方案（可能有更好的选择）是创建一个包含正文内容的 div 并在其上设置宽度，然后将正文宽度设置为 100%；

<body>

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

</body>

CSS：

body { width: 100%; }

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

似乎修复了 Firefox 的问题，我们将其测试回 IE7 没有任何问题。

于 2012-10-24T19:11:16.480 回答