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中加载它时，我收到此错误

Object不支持此属性或方法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]-->

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

如何修复网站的启动页面以便在IE8及以下版本中运行？

2 个答案: