页面布局中断当fancybox在Firefox 16.0.1中启动时 [英] Page Layout Breaks When fancybox Initiated in Firefox 16.0.1
问题描述
我添加了fancybox 2插件到我的网站，它工作正常，当我测试它在Chrome和Safari，但在Firefox它不。页面加载正常，但当你点击缩略图打开花式框，我的身体标记中的边缘风格被取消（我使用firebug确定这一点），我的整个布局完全移动到视口的右侧。当你点击出奇特的盒子，布局仍然推向右边。有任何人有一个类似的问题，你会有任何提示，如何解决它吗？我已经张贴我的DOCTYPE和波纹管以及我的身体的CSS规则。如果需要更多的信息，让我知道。网站尚未上线，所以我无法链接到它。我很抱歉，如果我错过了任何明显的东西。非常感谢任何认为他们可以帮助的人。
<！DOCTYPE HTML>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8>
< title>商业< / title>
< link href ='http：//fonts.googleapis.com/css？family = Lato：100'rel ='stylesheet'type ='text / css'>
< meta name =viewportcontent =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 =stylesheettype =text / css>
< script type =text / javascriptsrc =Scripts / jquery-1.8.2.min.js>< / script>
< script type =text / javascriptsrc =Scripts / fancyapps-fancyBox-e4836f7 / source / jquery.fancybox.pack.js>< / script>
< link href =Scripts / fancyapps-fancyBox-e4836f7 / source / jquery.fancybox.css =stylesheettype =text / css>
< / head>
body {
width：1050px;
background：＃c7c7c7;
margin：0 auto;
overflow：scroll;
}
今天早上。我去的解决方案（可能有一个更好的选择）是创建一个div包装的主体内容，并设置宽度，然后将主体宽度设置为100％;
< body>
< div id =container>
//页面内容
< / div>
< / body>
CSS：
code> body {width：100％; }
#container {width：1050px; margin：0 auto; }
似乎可以修复Firefox的问题，我们测试它回到IE7没有任何问题。 p>
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;
}
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.
这篇关于页面布局中断当fancybox在Firefox 16.0.1中启动时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
