如何修复网站的启动页面以在 IE8 及更低版本中工作？

Question

我很长时间以来一直在尝试弄清楚如何使该网站上的启动页面在 IE8 及以下版本中正常工作？目前，它适用于所有其他浏览器（Firefox、Chrome、Safari）。这是网站：

http://gds.parkland。 edu/student/fall10/gds220/ashipley/p2/final_revised/index.html

jQuery 代码：

/* Sliding Affect Splash Page */
$(function() {
    $('.box').each(function() {
        var $this = $(this);
        $.data(this, 'css', { 
            width: $this.css('width'),
            background: $this.css('background-image') 
        });
    });
});

function restore() {
    $('.box').each(function() {
        var orig = $.data(this, 'css');
        $(this).animate({
            width: orig.width
        },{queue:false});
        $(this).css({backgroundImage: orig.background});
    });
}

/* box 1 */
function boxHover(){
        $('.box').stop().animate({'width' : '596px'},{queue:false});
}

function box1master(){
        $('.box2').css({backgroundImage: 'url(images/splash/zatgun_midtop.jpg)'});
        $('.box3').css({backgroundImage: 'url(images/splash/zatgun_midbottom.jpg)'});
        $('.box4').css({backgroundImage: 'url(images/splash/zatgun_bottom.jpg)'});
}
function box2master(){
        $('.box1').css({backgroundImage: 'url(images/splash/bryan_top.jpg)'});
        $('.box3').css({backgroundImage: 'url(images/splash/bryan_midbottom.jpg)'});
        $('.box4').css({backgroundImage: 'url(images/splash/bryan_bottom.jpg)'});
}
function box3master(){
        $('.box1').css({backgroundImage:'url(images/splash/galleries_top.jpg)'});
        $('.box2').css({backgroundImage: 'url(images/splash/galleries_midtop.jpg)'});
        $('.box4').css({backgroundImage: 'url(images/splash/galleries_bottom.jpg)'});
}
function box4master(){
        $('.box1').css({backgroundImage: 'url(images/splash/contact_top.jpg)'});
        $('.box2').css({backgroundImage: 'url(images/splash/contact_midtop.jpg)'});
        $('.box3').css({backgroundImage: 'url(images/splash/contact_midbottom.jpg)'});
}


$(document).ready(function(){

    $('.box1').hover(function(){
        boxHover();
        box1master();
    }, function(){      
        restore();
    });

    $('.box2').hover(function(){
        boxHover();
        box2master();       
    }, function(){      
        restore();
    });

    $('.box3').hover(function(){
        boxHover();
        box3master();
    }, function(){      
        restore();
    });

    $('.box4').hover(function(){
        boxHover();
        box4master();
    }, function(){      
        restore();
    });

});

我想知道我是否可以使用 jQuery 更改每个框之间的间距，或者我是否必须以某种方式这样做CSS/HTML？

我在网站的 HTML 中搞乱的另一项是：

<!--[if lt IE 8]>

<style text="text/css">
.box2, .box3, .box4 { margin-top: 132px; }
</style>

<![endif]-->

每当我将边距更改为填充时，它的工作方式都不一样。到目前为止，每当我将鼠标悬停在它上面时，它都会正确间隔开，但会将右侧的内容推到边缘，而不显示另一侧的框。

Answer 1

当我在 IE8 中加载它时，出现此错误

对象不支持此属性
或方法 Slide_splash.js，第 81 行
字符1

这是第 81 行

$.preloadImages(['zatgun_midtop.jpg', 'zatgun_midbottom.jpg', 'zatgun_bottom.jpg', 'bryan_top.jpg', 'bryan_midbottom.jpg', 'bryan_bottom.jpg', 'galleries_mtop.jpg', 'galleries_midtop.jpg', 'galleries_bottom.jpg', 'contact_top.jpg', 'contact_midtop.jpg', 'contact_midbottom.jpg']);

这个 preloadImages 是什么以及它来自哪里。您从未将其粘贴为代码的一部分。

是从这个开始的吗？

http://plugins.jquery.com/project/preloadImages

如果是这样，我认为你需要下载使用它的插件。我在 Firefox 中也遇到同样的错误。

$.preloadImages is not a function
[Break On This Error] $.preloadImages(['zatgun_midtop.jpg', ...idtop.jpg', 'contact_midbottom.jpg']);

Answer 2

谢谢chobo2的回答！这绝对对我有很大帮助。

但我发现 div 相互推挤的原因是位置和边距被读入 IE。

我必须做的是：

<!--[if lt IE 9]>

<style text="text/css">
.box2, .box4{ top: 132px; }
.box3, .box4{ top: 264px; }
.box1, .box3{ position: absolute; }
.box2, .box4{ position: relative; }
a:hover { cursor: pointer; }
</style>

<![endif]-->

您现在可以在任何浏览器中查看结果此处 。