TinySlideShow; FireFox问题

Question

当我在FireFox中查看它时，我的TinySlider出现问题。问题在于图像位于滑块区域的一半，向左移动一半。这非常恼人，当我在Firefox中修复它时，它在其他浏览器中崩溃了。

这里的滑块的HTML代码：

<div id="FrontPageSlideshow"> 
    <ul id="slideshow"> 
      <li> 
       <h3>TinySlideshow v1</h3> 
       <span>assets/imgs/photos/1.jpg</span> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p> 
       <img class="thumber" src="assets/imgs/thumbnails/1.jpg" alt="" /> 
      </li> 
      <li> 
       <h3>Sea Turtle</h3> 
       <span>assets/imgs/photos/2.jpg</span> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p> 
       <img class="thumber" src="assets/imgs/thumbnails/2.jpg" alt="" /> 
      </li> 
      <li> 
      <h3>Red Coral</h3> 
       <span>assets/imgs/photos/3.jpg</span> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p> 
       <img class="thumber" src="assets/imgs/thumbnails/3.jpg" alt="" /> 
      </li> 
      <li> 
       <h3>Coral Reef</h3> 
       <span>assets/imgs/photos/4.jpg</span> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p> 
       <img class="thumber" src="assets/imgs/thumbnails/4.jpg" alt="" /> 
      </li> 
      <li> 
       <h3>Blue Fish</h3> 
       <span>assets/imgs/photos/5.jpg</span> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p> 
       <img class="thumber" src="assets/imgs/thumbnails/5.jpg" alt="" /> 
      </li> 
      <li> 
       <h3>TinySlideshow v.2</h3> 
       <span>assets/imgs/photos/6.jpg</span> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p> 
       <img class="thumber" src="assets/imgs/thumbnails/6.jpg" alt="" /> 
      </li> 
      <li> 
       <h3>Small Fish</h3> 
       <span>assets/imgs/photos/8.jpg</span> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p> 
       <img class="thumber" src="assets/imgs/thumbnails/8.jpg" alt="" /> 
      </li> 
     </ul> 
     <div id="wrapper"> 
      <div id="fullsize"> 
       <div id="imgprev" class="imgnav" title="Previous Image"></div> 
       <div id="imglink"></div> 
       <div id="imgnext" class="imgnav" title="Next Image"></div> 
       <div id="image"></div> 
       <div id="information"> 
        <h3></h3> 
        <p></p> 
       </div> 
      </div> 
      <div id="thumbnails"> 
       <div id="slideleft" title="Slide Left"></div> 
       <div id="slidearea"> 
        <div id="slider"></div> 
       </div> 
       <div id="slideright" title="Slide Right"></div> 
      </div> 
     </div> 
    <script type="text/javascript" src="js/compressed.js"></script> 
    <script type="text/javascript"> 
     $('slideshow').style.display='none'; 
     $('wrapper').style.display='block'; 
     var slideshow=new TINY.slideshow("slideshow"); 
     window.onload=function(){ 
      slideshow.auto=true; 
      slideshow.speed=5; 
      slideshow.link="linkhover"; 
      slideshow.info="information"; 
      slideshow.thumbs="slider"; 
      slideshow.left="slideleft"; 
      slideshow.right="slideright"; 
      slideshow.scrollSpeed=4; 
      slideshow.spacing=5; 
      slideshow.active="#fff"; 
      slideshow.init("slideshow","image","imgprev","imgnext","imglink"); 
     } 
    </script> 
    </div> 
    </div> 

这里的CSS滑块：

#slideshow {list-style:none; color:#fff} 
#slideshow span {display:none} 
#wrapper {width:506px; margin:0px 0px 30px 30px; display:none} 
#wrapper * {margin:0; padding:0} 
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000} 
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)} 
#information h3 {padding:4px 8px 3px; font-size:14px} 
#information p {padding:0 8px 8px} 
#image {width:auto;} 
#image img {position:absolute; z-index:25; width:auto} 
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150} 
#imgprev {left:0; background:url(../assets/imgs/images/left.gif) left center no-repeat} 
#imgnext {right:0; background:url(../assets/imgs/images/right.gif) right center no-repeat} 
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)} 
.linkhover {background:url(../assets/imgs/images/link.gif) center center no-repeat} 
#thumbnails {margin-top:15px} 
#slideleft {float:left; width:20px; height:81px; background:url(../assets/imgs/images/scroll-left.gif) center center no-repeat; background-color:#222} 
#slideleft:hover {background-color:#333} 
#slideright {float:right; width:20px; height:81px; background:#222 url(../assets/imgs/images/scroll-right.gif) center center no-repeat} 
#slideright:hover {background-color:#333} 
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden} 
#slider {position:absolute; left:0; height:50px} 
#slider img {cursor:pointer; border:1px solid #666; padding:2px} 

Answer 1

#image IMG {的位置是：绝对;的z-index：25;宽度：自动}

这可能是你的问题。我认为你是在告诉你的图像在#image div中定位自己。但你还没有给他们“左：x;”或“top：y;”坐标。

你可以试试这个：

#image IMG {位置：绝对的; left：0;顶部：0; z-index：25;宽度：汽车}

这可能会迫使你的图片对齐顶部和父DIV离开。如果这不起作用，那么你的父div（#image）是不一致的，你需要继续向上工作（即：#fullsize或#wrapper）。