jquery - jQuery / Css IE 7-8-9 の問題に関するアドバイス

Question

フローティング動的な古いイメージのスタックを使用してポートフォリオベースのWebサイトを作成しようとしています.

私の問題は（いつものように）IE 7-8-9です。このプラットフォームで何が壊れる可能性があるのか​​ 頭を包むことはできません。私の最善の推測は、それがjQueryクロスの問題ですか？

このjsFiddelを確認してください

または、ここでオンラインの例を確認してください

私が探しているのは、私が自分でそれを理解しようとしている白髪があるので、私がどこで間違っているのかについてのアドバイスです。アドバイス、アイデア、記事などは大歓迎です。

前もって感謝します マッツ

jQuery コード:

$(window).load(function () {
    plottingData();
    resizeImage();
});

$(window).resize(function () {
    plottingData();
    resizeImage();
});

function plottingData() {
    var image = $('.box img');
    var divW = $(".box").width();
    var divH = $(".box").height();
    var imgW = image.width();
    var imgH = image.height();
    $('.outputText').html('DIV CONTAINER W: ' + divW + ' H: ' + divH + '  ::  imgW: ' + imgW + ' : imgH: ' + imgH);
}


function resizeImage() {
    $("img").each(function () {
        var maxWidth = $(".box").width();; // Max width for the image
        var maxHeight = $(".box").height();; // Max height for the image
        var maxratio = maxHeight / maxWidth;
        var width = $(this).width(); // Current image width
        var height = $(this).height(); // Current image height
        var curentratio = height / width;
        // Check if the current width is larger than the max

        if (curentratio > maxratio) {
            ratio = maxWidth / width; // get ratio for scaling image
            /*
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height *ratio); // Scale height based on ratio
            */
            $(this).css("width", "100%");
            $(this).css("height", "auto");
        } else {
            /*
            ratio = maxHeight / height; // get ratio for scaling image
            $(this).css("height", maxHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            */
            $(this).css("width", "auto");
            $(this).css("height", "100%");
        }

    });
}