Question

我创建了一个包含在线商店的网站。有不同类别的产品。我正在使用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();
}

Answer 1

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

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

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

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

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

在IE8 / 9中没有正确加载/渲染图像的jQuery动态内容

1 个答案: