Question

这是一个指向here的链接（因为我还没有足够的信誉直接发布imgs）。

我用chrome，safari，ff，opera测试了我的页面，一切正常。 IE9正在创建空的嵌套div容器，它们具有与其下面的内容相同的类。

以下是示例代码：

<body class="no-touch">
    <header>
        <nav>
            <!--#include virtual="/menu.shtml"-->
        </nav>
    </header>
    <div class="wrap">
        <div class="box">
            <div class="boxInner">
                <a href="project_example.shtml"><img src="Thumbnails/1.jpg" /></a>
                <div class="titleBox">Some text</div>
            </div>
        </div>
        ...
        <div class="box">
            <div class="boxInner">
                <a href="#"><img src="Thumbnails/8.jpg" /></a>
                <div class="titleBox">Some text</div>
            </div>
        </div>
    </div>
    <!-- /#wrap -->

这是所有的JS：

$(function() {
    // Stick the #nav to the top of the window
    var nav = $('#nav');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                left: nav.offset().left,
                width: nav.width()
            });
            isFixed = true;
        } else if (!shouldBeFixed && isFixed) {
            nav.css({
                position: 'absolute'
            });
            isFixed = false;
        }
    });
});

$(function() {
    // See if this is a touch device
    if ('ontouchstart' in window) {
        // Set the correct [touchscreen] body class
        $('body').removeClass('no-touch').addClass('touch');

        // Add the touch toggle to show text when tapped
        $('div.boxInner img').click(function() {
            $(this).closest('.boxInner').toggleClass('touchFocus');

        });
        $('.nav ul li a').click(function() {
            $(this).closest('.nav li').toggleClass('touchFocus');


        });
    }
});

$(document).ready(function() {
    $('.thumbnail').live("click", function() {
        $('#mainImage').hide();
        var i = $('<img />').attr('src', this.href).load(function() {
            $('#mainImage').attr('src', i.attr('src'));
            $('#imageWrap').css('background-image', 'none');
            $('#mainImage').fadeIn();
            $('div img').each(function(index) {
                var width = $(this).width(); // Current image width
                var height = $(this).height(); // Current image height

                // Check if the current width is larger than the max
                if (height > width) {
                    $(this).css("width", "44.5%"); // Set new width

                } else {
                    $(this).css("width", "100%");
                }
            });

        });
        return false;
    });


});

$(window).load(function() {
    $('img').each(function(index) {
        var width = $(this).width(); // Current image width
        var height = $(this).height(); // Current image height

        // Check if the current width is larger than the max
        if (height > width) {
            $(this).css("width", "44.5%"); // Set new width
            $(this).addClass("vert img"); // Set new width
        }
    });
});

很抱歉，如果格式很有趣。我很难粘贴代码。如果还需要CSS，请告诉我。

IE9创建了重复的空嵌套div容器

0 个答案: