0

我有一个 FancyBox (2.0.5) 页面，它可以在除 IE 和 FF for Windows 之外的所有浏览器上精美显示。我可能只是需要一些新的眼光。

这是我的代码：

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

如您所见，它非常基本。我没有使用任何帮助程序，也没有修改默认 CSS。

在每个 Mac 浏览器和 PC 版 Chrome 上，我得到这个：

在此处输入图像描述

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

在 IE 7 & 8（尚未尝试过 9）和 FF for Windows 上，我得到了这个：

在此处输入图像描述

没有框架，没有背景，也没有关闭按钮。此外，您无法关闭它；你必须刷新。

我在这里缺少什么吗？

这是一个链接： http: //www.downtownmuncie.org/business/search2/arts/您需要单击小地图下的“缩放地图”链接。

4

1 回答 1

4

如果您想让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"从该行中删除，并且建议将其移动到<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的方式记录的

还建议使用验证器来检查和修复所有小的 html 编码错误。

于 2012-07-22T06:45:01.737 回答