jQuery EasySlider 1.7故障在IE 8中

Question

我在我的website的主頁上有一個EasySlider幻燈片，在Firefox和Chrome中運行良好，但在IE中無法運行。我特別需要幫助的問題發生在IE7和IE8中。

如果您單擊上一個箭頭從第一張幻燈片到最後一張，最後一張幻燈片中的圖像從左側開始，然後跳到它所屬的右側。從最後一張幻燈片轉換到第一張幻燈片時，第一張幻燈片上的圖像會發生同樣的情況。只有在這兩個幻燈片上纔會出現此問題，並且僅在從第一張幻燈片到最後一張幻燈片（最後一張幻燈片上的毛刺）倒退時纔會出現此問題，並從最後一張幻燈片向第一張幻燈片（第一張幻燈片上的毛刺）前進。

HTML

<div id="slider"> 
    <ul> 
     <li> 
      <article id="architectural-illustration"> 
       <div class="slider-text"> 
        <h1>A Fresh Look @ Architecture</h1> 
        <p>With over 10 years of architectural design experience we are able to create beautifully rendered 3D models and plans for almost any size or type of project using the latest in CAD technology. Let us help bring your projects to life!</p> 
        <p>seeing is believing: <a href="#">Drawing Board</a></p> 
       </div> 
       <div class="architectural-illustration-image"> 
        <img alt="3D model of residential floorplan" src="images/drafting-3d-models-scroller.png" width="469" height="350" /> 
       </div> 
      </article> 
     </li> 
     <li> 
      <article id="web-design"> 
       <div class="slider-text"> 
        <h1>High Flying Web Designs</h1> 
        <p>No "cookie cutter" designs here! We believe that each client has its own story to tell. Our designs come from working closely with you. Give your site the look and feel needed to tell who you are.</p> 
        <p>preflight check: <a href="#">See Our Work</a></p> 
       </div> 
       <div class="web-design-image"> 
        <img alt="binary code flag" src="images/web-designs-scroller.jpg" width="395" height="320" /> 
       </div> 
      </article> 
     </li> 
     <li> 
      <article id="3d-illustration"> 
       <div class="slider-text"> 
        <h1>Product Illustration</h1> 
        <p>Whether your product is existing or a new idea, we can bring it to life. From still frames to full blown 3D animations, get the right tools to market your product.</p> 
        <p>sneak a peak: <a href="#">Examples</a></p> 
       </div> 
       <div class="model-image"> 
        <img alt="3d illustration of shoring product" src="images/3d-product-illustration-scroller.png" width="397" height="315" /> 
       </div> 
      </article> 
     </li> 
     <li> 
      <article id="mobile-web"> 
       <div class="slider-text"> 
        <h1>Make it mobile.</h1> 
        <p>Because websites are typically optimized for desktop usability, they don't follow the guidelines necessary for usable mobile access. "Bah Humbug!" With the mobile world advancing each and every day, we have solutions to make sure your web site goes everywhere you do.</p> 
        <p>learn more: <a href="#">Free Consultation</a></p> 
       </div> 
       <div class="mobile-web-image"> 
        <img alt="mobile phone showing optimized website" src="images/mobile-website-solutions-scroller.jpg" width="401" height="353" /> 
       </div> 
      </article> 
     </li> 
    </ul> 
</div> <!-- end #slider div --> 

jQuery的

<script type="text/javascript"> 
$(document).ready(function() { 
          $("#slider").easySlider({ 
                auto: true, 
                continuous: true 
                }); 
          }); 
</script> 

CSS

#slider ul, #slider li { 
margin:0; 
padding:0; 
list-style:none; 
} 
#slider, #slider li { 
margin-bottom:20px; 
background-color:#fff; 
width:960px; 
height:375px; 
overflow:hidden; 
} 
#slider article{ 
width:960px; 
height:375px; 
} 
#slider article p { 
margin-top:20px; 
} 
#slider article div.slider-text { 
width: 470px; 
margin:20px; 
margin-right:0px; 
float:left; 
} 
#slider article div.architectural-illustration-image, 
#slider article div.web-design-image, 
#slider article div.model-image, 
#slider article div.mobile-web-image { 
width:470px; 
float:right; 
overflow:hidden; 
} 
#slider article div.architectural-illustration-image { 
margin-right:0px; 
margin-top:25px; 
width:462px; 
height:337px; 
} 
#slider article div.web-design-image { 
margin-right: 20px; 
margin-top:55px; 
height:320px; 
width:395px; 
} 
#slider article div.model-image { 
margin-right:50px; 
margin-top:25px; 
height:315px; 
width:397px; 
} 
#slider article div.mobile-web-image { 
margin-right:0px; 
margin-top:22px; 
width:401px; 
height:353px; 
} 

任何幫助將不勝感激。謝謝！

Answer 1

這解決了我遇到的定位問題，不確定它是否適用於這個特定的錯誤，但值得一試。只要#slider { position: relative; }找到here