Wie kann ich die Splash-Seite der Website reparieren, um in IE8 und darunter zu arbeiten?

Question

Ich habe versucht, die längste Zeit herauszufinden, wie ich die Splash-Seite auf dieser Website in IE8 und darunter korrekt funktionieren lassen kann? Im Moment funktioniert es auf allen anderen Browsern (Firefox, Chrome, Safari). Hier ist die Website:

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

jQuery-Code:

/* 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(); 
    }); 

}); 

Ich frage mich, ob ich den Abstand in-zwischen jeder der Boxen mit jQuery ändern könnte oder wenn ich irgendwie zu tun haben, diese in das CSS/HTML?

Ein weiterer Punkt Ich habe mit worden Unordnung innerhalb der HTML-Code der Webseite ist:

<!--[if lt IE 8]> 

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

<![endif]--> 

Jedes Mal, wenn ich die Marge auf padding ändern, ist es nicht die gleiche Arbeit. Immer wenn ich jetzt darüber schwebe, ist der Abstand korrekt, aber der Inhalt wird auf der rechten Seite an den Rand geschoben, und die Felder auf der anderen Seite werden nicht angezeigt.

Answer 1

Wenn ich es in IE8 laden bekomme ich diesen Fehler

Objekt diese Eigenschaft oder Methode slide_splash.js unterstützt, Linie 81 Charakter 1

Diese Linie 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']); 

Was ist das preloadImages und woher kommt es? Sie haben es nie als Teil Ihres Codes eingefügt.

Ist es von diesem?

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

Wenn ja muss ich denken, dass Sie das Plugin herunterladen, es zu benutzen. Ich bekomme es auch in Firefox den gleichen Fehler.

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

Answer 2

Vielen Dank chobo2 für Ihre Antwort! Das hat mir sehr geholfen.

Aber ich fand heraus, der Grund, warum die divs sich gegenseitig schoben, war wegen der Position und Ränder, die in IE gelesen werden.

Was ich tun musste, war die folgende:

<!--[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]--> 

Sie können die Ergebnisse in jedem Browser jetzt here sehen.