jQuery 覆盖在 IE6、Opera 中不起作用

Question

我一直在摸索好几个小时试图弄清楚这一点。我有这个页面：http://173.203.72.190/default.aspx。单击“任何美食”时，应该会打开一种叠加层。

除了 IE6 和 Opera 之外，它几乎在所有浏览器中都能正常工作。在 IE6 和 Opera 中，jQuery 'overlay' 不会打开。

有人知道为什么会这样吗？

编辑：触发覆盖的代码如下：

$("a#zoneListLink").click(function() { 

    var listTop = $(this).css("top");
    var listLeft = $(this).css("left");

    var api = $("a#zoneListLink").overlay({api: true, close:'div.close', top: listTop, left:listLeft, onLoad:function() { $(document).click(function() { api.close(); } ); },
    onClose:function() { $(document).unbind("click"); } }).load();

});

Answer 1

jQuery 叠加效果内部存在错误或不兼容问题。很难找到，因为 Opera 的行为更有意义，但打破了脚本的错误预期..

首先，比较这个命令在 Opera 和 Firefox 中的输出：

javascript:alert(getComputedStyle(document.getElementById("cuisineListLink"),'').top);

Opera 为您提供美食列表链接的顶部位置（以像素为单位）。 Firefox 说“自动”。

现在，在 combine.js 中查找这段代码（由我包装）：

if(typeof t=="string"){
    t=t=="center"?Math.max((n.height()-q)/2,0):parseInt(t,10)/100*n.height()
}

我不知道为什么它会执行“parseInt(t,10)/100*n.height()”，但看起来这段代码需要字符串“center”（对图层进行垂直居中）或一个号码。当 Opera 传入像 '310px' 这样的字符串时，脚本将提取整数，将其除以 100（即 3.1），然后乘以浏览器窗口的高度（？！）。最终效果是叠加层被小心地放置在屏幕之外 - 向下 3 个屏幕高度。

在 Firefox 中，我们到达这一行，变量 t 是字符串 'auto'。该脚本尝试返回“非数字”NaN 的 parseInt()，然后继续除以 100 并乘以窗口高度——这当然会继续返回 NaN。然后它将覆盖定位在 NaNpx 上，浏览器将简单地将其作为虚假值忽略。您会在 Firefox 的错误控制台中找到与此相关的警告。

我建议使用不同的覆盖插件（或者可能是更新的迭代？），因为这段代码没有多大意义。