0

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

http://www.thekclonghorns.com/TeamStore/Store.aspx

该页面在除 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();
}
4

1 回答 1

1

快速而肮脏的答案是您强制页面加载为 IE7 标准。

只要页面不在 IE7 标准文档模式下，该页面就可以在 IE 8/9 中正常加载。

从头中删除以下内容（或将其更改为 8，或者您需要的最低版本以实现兼容性，假设您甚至需要使用 X-UA-Compatible）应该可以解决问题：

<meta http-equiv="X-UA-Compatible" content="IE=7" />

至于为什么它破坏 IE7 标准文档模式将是一个不同的问题，但从技术上讲，对于 IE8/9 来说一切都很好，你只是在强迫他们使用 7 个确实破坏的标准。

于 2013-01-08T17:14:37.057 回答