Question

我目前在我的网页上有一个由jQuery提供支持的小幻灯片。

当我在Firefox中测试我的网页时，幻灯片正好排列在我想要的位置。但是，在Safari和Chrome中，幻灯片放映量偏移约15px。

通过正常的无序列表在我的HTML中检索图像。如下图所示：

<div class="slideshow">
     <ul>
         <li><img src="Images/slideshow/1.png" alt="LXA 1" /></li>
         <li><img src="Images/slideshow/2.png" alt="LXA 2" /></li>
         <li><img src="Images/slideshow/3.png" alt="LXA 3" /></li>
         <li><img src="Images/slideshow/4.png" alt="LXA 4" /></li>
         <li><img src="Images/slideshow/5.png" alt="LXA 5" /></li>
     </ul>
</div>

幻灯片课程的CSS是：

.slideshow-div{
    width:1040px;
    padding-left:325px;
    padding-top:0px;
    height:287px;   
    background-image: url('../Images/slideshow-background.jpg');
    background-repeat: no-repeat;
}

当然，当我下载jQuery插件时，我得到了一个单独的CSS文件。但我不会在这里包括它。

我知道不同浏览器中的行为方式不同。但这是我第一次不得不使用它。所以我不确定如何防范这一点。

Answer 1

您可以创建一个css类，将元素完美地定位在特定浏览器上，这些浏览器目前正在给您带来麻烦。接下来，确定正在使用哪个浏览器并调用与该浏览器对应的css类。

有许多方法可以满足跨浏览器功能 - 这只是一种方法。这一切都归结为要求和偏好：）

Answer 2

您是否使用“Firebug”检查了导致偏移的原因？我知道有些浏览器提供ul个margin-left而有些浏览器会给padding-left - 也许您忘记重置这两个浏览器了？

Answer 3

如果幻灯片中的所有图像DIV'幻灯片'，则表示jquery功能正常工作。所以真正的问题不是你的jQuery脚本，而是CSS文件。您仅为slideshow-div元素提供了有关CSS的信息。你不应该在没有造型的情况下离开UL和LI。

在创建网站之前重置CSS是一种很好的做法。您可以按照http://meyerweb.com/eric/tools/css/reset/中的说明进行操作。重新设置CSS将更改当前视图，因此需要进行更正。

Chrome，Firefox和Safari中的jQuery幻灯片

3 个答案: