FancyBox + Windows IE/FF = 失败答案

【问题标题】：FancyBox + Windows IE/FF = FailFancyBox + Windows IE/FF = 失败
【发布时间】：2012-07-21 16:01:37
【问题描述】：

我有一个 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/ 您需要点击小地图下的“缩放地图”链接。

【问题讨论】：

可能重复。看这里：stackoverflow.com/questions/9011549/…
不。我的 DOCTYPE 设置为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">，我的字符编码设置为 utf-8。
原来如此，Linuxios。客户发给我的。对我来说，它在 FF 中运行良好。
更正了有问题的错误。事实上，它不适用于 FF for Windows。我的错，感谢 Linuxios 指出这一点。
那么，问题得到解答了吗？如果没有，如果你能分享一个链接，我们可以看到问题，如果 FF 并追踪它的原因，那就太好了。

标签： jquery internet-explorer firefox fancybox fancybox-2

【解决方案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" 也是可取的将其移至文档的 <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 编码错误。

【讨论】：

太棒了！感谢您的彻底回答和专业的交付。我为犯了这么多新手错误而感到尴尬，但这就是当你匆忙完成工作时会发生的事情。我几乎希望其他浏览器不要那么宽容。我可能会更早发现这些错误。再次感谢！