Question

我有一个FancyBox（2.0.5）页面，在每个浏览器上都能很好地显示，但IE和FF for Windows。我可能只需要一些新鲜的眼睛。

这是我的代码：

$('.fancybox').fancybox({
 'type': 'iframe', 
 'width': 800, 
 'height': 580
});

如你所见，这是非常基本的。我没有使用任何助手，也没有修改默认的CSS。

在每台Mac浏览器和Chrome for PC上，我都明白了：

enter image description here

这正是我应该得到的（尽管我可以不使用滚动条）。

在IE 7＆amp; 8（还没试过9）和FF for Windows，我明白了：

enter image description here

没有框架，没有背景，也没有关闭按钮。另外，你不能关闭它;你必须刷新。

这里有什么我想念的吗？

以下链接：http://www.downtownmuncie.org/business/search2/arts/您需要点击较小地图下的“缩放地图”链接。

Answer 1

如果你想让fancybox变得可行（并且很可能也是其他东西），你需要在网站上修复很多东西。

第一个，第153和154行：当您实际需要一个实例时，您正在加载2个fancybox实例

<script src="http://www.downtownmuncie.org/s/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<script src="http://www.downtownmuncie.org/s/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>

选择其中任何一个，但不是两个。

第二，您问题的真正问题是第155行

<link href="http://www.downtownmuncie.org/s/fancybox/jquery.fancybox.css" type="text/javascript" type="text/css" rel="stylesheet" >

请注意，您有type="text/javascript"和type="text/css"这就是为什么fancybox css文件无法加载所以它显示奇怪（复制和粘贴可能非常危险。）从中删除type="text/javascript" line AND也建议将其移至文档的<head>部分。

第三，第4行你有和额外的双引号“所以你的文件没有字符编码信息;这部分：

content="text/html; charset="utf-8"

应该是

content="text/html; charset=utf-8"

如果你能找到差异（提示：全部作为content值）

第四个也是最后一个，第158行

<script type="text/javascript">
$('a.fancybox').fancybox({
 'type': 'iframe', 
 'width': 800, 
 'height': 580
});
</script>

将您的脚本包含在.ready()方法中，如

<script type="text/javascript">
$(document).ready(function(){
 $('a.fancybox').fancybox({
  'type': 'iframe', 
  'width': 800,
  'height': 580
 });
});
</script>

以http://fancyapps.com/fancybox/#instructions

的方式记录

建议使用a validator检查并修复所有小的HTML编码错误。

FancyBox + Windows IE / FF =失败

1 个答案: