Question

我的图片幻灯片显示在chrome和explorer上的正确位置，但没有使用firefox。图像正确放置在slideshow_box内，但在Firefox上，它们远离浏览器的右上角。幻灯片显示使用javascript。

有没有人知道为什么会这样？

html代码：

 <div id="slideshow_box" class="clear">
           <div class="slides">
                <ul>
                    <li><a href="#"><img src="images/buses.jpg" alt="bus in clydebank" </a></li>
                    <li><a href="#"><img src="images/school_work.jpg" alt="school" </a></li>
                    <li><a href="#"><img src="images/haven.jpg" alt="the haven kilmacolm" </a></li>
                </ul>
           </div><!--slides-->   
  </div><!--slideshow_box-->

css：

#slideshow_box { 
background: url(../images/slideshow-box.png) no-repeat; height: 312px;  margin: 20px auto;
}

#slideshow_box .slides ul { 
list-style:none; position:relative; bottom: 50px; left: 40px; width: 750px; height: 250px; overflow: hidden;
 }

任何帮助将不胜感激：）

Answer 1

替换为你的img标签

替换

<li><a href="#"><img src="images/buses.jpg" alt="bus in clydebank" </a></li>

进入此

<li><a href="#"><img src="images/buses.jpg" alt="bus in clydebank"/> </a></li>

这里是jsfiddle

Answer 2

.slides ul和#slideshow_box的高度差异为62px。如果您想将.slides ul置于容器内，那么底部值应该在31px。顺便说一句，我认为如果你定义#slideshow_box的宽度值也会更好。

在Firefox上显示错误位置的幻灯片图像

2 个答案: