IE JS 兼容性 - 在 FF 中工作？答案

【问题标题】：IE JS compatibility - working in FF?IE JS 兼容性 - 在 FF 中工作？
【发布时间】：2011-10-06 23:01:25
【问题描述】：

以下代码在 FireFox 中按预期显示，但在 Internet Explorer (v8) 中完全不显示。

        // getLimits init
        Frog.API.get('users.getInfo',
        {
            'params': {'id': UWA.Environment.user.id, 'details':'groups' },
            'onSuccess': AssignPoints.getLimit,
            'onError': function(err) { alert(err); }
        });

...

    // work out the user's limit, and how many points they've spent this week
    // use LEAP library if necessary
    AssignPoints.getLimit = function(data) {
        for (var i in data[0].groups) {
            if (data[0].groups[i].name.indexOf("LEAP") != -1) {
                AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
            }
        }
/************** IT'S THIS LINE ONWARDS WHERE THE ALERTS SEEM TO BREAK IN IE */
        if (AssignPoints.Limit == 0) {
            AssignPoints.Specialist = true;
        }
        
        UWA.Data.getJson(AssignPoints.URL + "?cmd=getLimitsAndTotals&Giver_ID=" + AssignPoints.CurrentUser, AssignPoints.getPointsSpent); 
    }
    
    AssignPoints.getPointsSpent = function(data) {
        AssignPoints.SpentWeekly = data.SpentWeekly;
        AssignPoints.SpentTotal = data.SpentTotal;
        
        AssignPoints.displayLimitAndTotals();
    }

    // display data from getLimitAndTotals
    AssignPoints.displayLimitAndTotals = function() {
        var LimitsAndTotalsHTML = '<h2>Points Allocation</h2>';
        
        if (AssignPoints.Specialist == false) {
            LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>' + AssignPoints.Limit + '</strong></li>';
        } else {
            LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>Unlimited</strong></li>';
        }
        
        LimitsAndTotalsHTML += '<li>Spent this week: <strong style="color:#990000;">' + AssignPoints.SpentWeekly + '</strong></li>' + 
            '<li>Spent total: <strong>' + AssignPoints.SpentTotal + '</strong></li></ul>';

        $('div#limits').html(LimitsAndTotalsHTML);
    }

编辑：CSS 和 HTML 我不认为这是一个 CSS/HTML 问题，因为我有这个脚本的先前版本（我决定重写，因为它是可怕的代码和一些奇怪的程序混搭，只是纯粹的 bodging）在 IE 中正确显示使用完全相同的 HTML&CSS。

#total_container
{ overflow: hidden; width: 870px; }

#groups
{ width: 250px; float: left; padding: 10px; }
#right_container
{ width: 580px; float: left; padding: 10px; }

span.check
{ font-size: 10px; color: #666; }
span.err
{ color: red; font-weight: 700; }

#limits, #search_div
{ width: 270px; float:left; padding: 0 10px; }


#groups li, #groups ul
{ list-style-type: none; background: none; margin: 0; padding: 0; }
#groups li a
{ background-color: #999; color: #eee; display: block; margin: 5px 0; border: #666; padding: 8px 2px 8px 10px; width: 243px; }
#groups li a:hover
{ background-color: #990000; }

HTML 只是 <div id="limits"></div>，JS 会更新它。

// 编辑

第二次编辑：提醒

我尝试将随机警报放入代码中。在 IE 中，在for (var i in data[0].groups) 循环中，警报起作用。如果我在 for 循环之后的任何时候发出警报，则无论我使用变量名还是随机字符串（例如 "test"），警报都不会出现。

在 FF 中，无论在任一函数中的位置如何，警报都会起作用。

** // 第二次编辑 **

FireFox，按预期工作

Internet Explorer，b0rked

有谁知道什么会破坏 IE？

提前致谢。

【问题讨论】：

我想这可能与 html 和 css 而不是 javascript 有关。可以提供html吗？也许是一个 jsfiddle.net？
JSFiddle 无法工作，因为我正在使用 Frog API。我将使用 CSS 更新我的原始帖子，但我已经获得了文件的原始版本（我重新编写了它，因为它是可怕的代码），它使用相同的 HTML/CSS 在 IE 中正确显示。
如果你保存渲染的html，它在IE8中是否正确显示？还有，你有没有 js 错误？
FF 中没有 JS 错误，我什至不知道如何在 IE 中检查 JS 错误，开发者工具让我非常困惑。虽然没有黄色感叹号或任何东西 - 根本没有明显的迹象。如果我将渲染的 HTML 从 FF 复制到记事本文件中并使用 IE 运行它，它会显示。
你检查UWA.Data.getJson是否从服务器检索到预期的数据？

标签： javascript firefox internet-explorer-8

【解决方案1】：

好的！我找到了问题。

IE 不喜欢这段代码：

    for (var i in data[0].groups) {
        if (data[0].groups[i].name.indexOf("LEAP") != -1) {
            AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
        }
    }

当我将其更改为这种格式时：

        for (var i = 0; i < data[0].groups.length; i++) {
            if (data[0].groups[i].name.substr(0,4) == "LEAP") {
                AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
            }
        }

它在 FF 和 IE 中按预期工作。

【讨论】：