ウェブサイトのスプラッシュページを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でそれをロードすると、私はこのエラー

オブジェクトが1

、 または方法slide_splash.jsライン81 文字を、このプロパティをサポートしていません。これは、ライン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']); 

このプリロードイメージとは、どのようなもので、どこから来たのですか？コードの一部として貼り付けたことはありません。

これはこれですか？

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

回答ありがとうございました！それは間違いなく私を助けました。

しかし、IEに読み込まれている位置と余白のためにdivが互いに押し付け合っている理由がわかりました。私は、次のされたをしなければならなかった何

：

<!--[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任意のブラウザで結果を見ることができます。