jQuery动态内容，图像在IE8/9中未正确加载/呈现

我已经创建了一个带有在线商店的网站。有不同种类的产品。我使用jQuery选项卡显示这些类别。每个类别选项卡都列出该类别下的产品。我正在使用jQuery动态创建类别选项卡和内容。我还使用jQueryNailThumb动态生成缩略图。网址是：

该页面在除IE8和IE9之外的所有浏览器上都能正确呈现。在我遍历所有选项卡之后，它在IE8和IE9中显示良好

显示商店的代码如下所示。你知道为什么这不能在IE中正确呈现吗

谢谢

$(document).ready(function () {

    setupPage();

});

function setupPage() {
    showProgress();
    clearProducts();

    setupCategories();
}

function setupCategories() {
    loadingCount++;

    GetCategories([], true,
    {
        successCallback: function (data) {
            if ((data) && (data != null) && (data.length > 0)) {
                setupProducts(data);
            }

            data = null;
        },
        errorCallback: function (httpRequest, status, error, functionName) {
            httpRequest = null;
            status = null;
            error = null;
            functionName = null;
        },
        completeCallback: function () {
            loadingCount--;
            checkLoading();
        }
    });
}

function setupProducts(categories) {
    GetProducts([], true,
    {
        successCallback: function (data) {
            if ((data) && (data != null) && (data.length > 0)) {
                buildCategoryDisplay(categories, data);
            }

            data = null;
        },
        errorCallback: function (httpRequest, status, error, functionName) {
            httpRequest = null;
            status = null;
            error = null;
            functionName = null;
        },
        completeCallback: function () {
            loadingCount--;
            checkLoading();
        }
    });
}

function buildCategoryDisplay(categories, products) {
    var content = [];
    var category;
    var product;
    var totalCols = 4;
    var limit = 0;

    content.push("<div id=\"tabs\">");
    content.push("<ul>");

    for (var i = 0; i < categories.length; i++) {
        category = categories[i];
        if (category.IsActive) {
            content.push("<li><a href=\"#tabs-" + category.Id + "\">" + category.Name + "</a></li>");
        }
    }
    content.push("</ul>");

    for (var i = 0; i < categories.length; i++) {
        category = categories[i];
        if (category.IsActive) {
            content.push("<div id=\"tabs-" + category.Id + "\">");
            content.push("<h4>" + category.Name + "</h4>");
            //get the list of products for this category and display them with links to details page
            if (products != null && products.length > 0) {
                content.push("<table cellspacing=\"0\" cellpadding=\"0\" rules=\"none\" border=\"0\" class=\"modal_page_form\" style=\"width: 540px; margin: 4px;border-collapse: collapse; margin-bottom: 0px;\">");
                content.push("<tr>");
                for (var j = 0; j < products.length; j++) {                    
                    product = products[j];
                    if (product.Category.Name == category.Name) {
                        limit = limit + 1;
                        content.push("<td><a href=" + pageLocation + "TeamStore/StoreProductDetails.aspx?ProductId=" + product.Id + ">");
                        if (product.HasPhotos) {
                            content.push("<div class=\"nailthumb-container\" href=" + pageLocation + "Uploads/" + product.Photos[0].ImagePath.replace(/ /gi, "%20") + "><img src=" + pageLocation + "Uploads/" + product.Photos[0].ImagePath.replace(/ /gi, "%20") + "></img></div>");
                        }
                        else {
                            content.push("<div class=\"nailthumb-container\" href=" + pageLocation + "Uploads/no-img.jpg><img src=" + pageLocation + "Uploads/no-img.jpg></img></div>");
                        }
                        content.push("<br/><br/><p>" + product.Title + "<br/>$" + product.Cost + "</p>");
                        content.push("</a></td>");
                        if (limit == totalCols) {
                            content.push("</tr><tr>");
                            limit = 0; //reset limit
                        }
                    }
                }
                limit = 0;
                content.push("</tr></table>");
            }

            content.push("</div>");
        }
    }

    content.push("</div>");

    $("#productsContainer").replaceHtml(content.join(""));
    $("#productsContainer").show();
    $(".nailthumb-container").nailthumb({ width: 100, height: 100, fitDirection: 'top left' });

    $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");

    content = null;
    category = null;
    product = null;
    totalCols = null;
    limit = null;
}


function clearProducts() {
    $("#productsContainer").replaceHtml("").hide();
}

$（文档）.ready（函数（）{
setupPage（）；
});
函数设置页（）{
showProgress（）；
clearProducts（）；
设置类别（）；
}
函数setupCategories（）{
loadingCount++；
GetCategories（[]，true，
{
successCallback:函数（数据）{
如果（（data）&（data！=null）&&（data.length>0））{
产品（数据）；
}
数据=空；
},
errorCallback:函数（httpRequest、状态、错误、函数名）{
httpRequest=null；
状态=空；
错误=null；
functionName=null；
},
completeCallback:函数（）{
装载计数--；
检查加载（）；
}
});
}
功能设置产品（类别）{
GetProducts（[]，true，
{
successCallback:函数（数据）{
如果（（data）&（data！=null）&&（data.length>0））{
buildCategoryDisplay（类别、数据）；
}
数据=空；
},
errorCallback:函数（httpRequest、状态、错误、函数名）{
httpRequest=null；
状态=空；
错误=null；
functionName=null；
},
completeCallback:函数（）{
装载计数--；
检查加载（）；
}
});
}
功能构建类别显示（类别、产品）{
var内容=[]；
var类别；
var乘积；
var totalCols=4；
var限值=0；
内容。推送（“”）；
内容推送（“
”）；
对于（变量i=0；i”）；
}
}
内容推送（“
”）；
对于（变量i=0；i0）{
内容。推送（“”）；
内容。推送（“”）；
对于（var j=0；j

快速而肮脏的答案是，您正在强制页面按照IE7标准加载

该页面在IE8/9中加载良好，只要它不是在IE7标准文档模式下

从头部移除以下内容（或者将其更改为8，或者假设您甚至需要使用X-UA-Compatible，那么您需要的最低版本是什么）应该可以解决问题：

---

至于为什么它会破坏IE7标准文档模式，这是另一个问题，但从技术上讲，IE8/9的一切都很好，你只是强迫他们使用7个标准，而这些标准确实会破坏。

非常感谢！这就解决了！我完全忘了我在主文件中添加了那个标题。感谢您的帮助。：）很高兴其他人都这么做了！有时候，当你盯着代码看得太久，你需要一个新的视角来发现它是另一个东西时，这些小东西很容易被忽视=）当然！再次感谢！：）