Chrome、Firefox 和 Safari 中的 jQuery 幻灯片答案

【问题标题】：jQuery Slideshow in Chrome, Firefox, and SafariChrome、Firefox 和 Safari 中的 jQuery 幻灯片
【发布时间】：2011-12-28 09:57:01
【问题描述】：

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

当我在 Firefox 中测试我的网页时，幻灯片显示在我想要的位置。但是，在 Safari 和 Chrome 中，幻灯片放映偏移了大约 15 像素。

图像是通过正常的无序列表在我的 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 文件。但我不会在这里包含它。

我知道事情在不同的浏览器中表现不同。但这是我第一次不得不使用它。所以我不确定如何防止这种情况发生。

【问题讨论】：

您发布的代码中没有任何内容表明任何内容。很可能问题出在其他一些周围的元素或 CSS 上。
我明白这一点。我只是不明白为什么它在 Firefox 中有效，但没有别的。
我被你的标题弄糊涂了。这与 jQuery 无关。没有链接或 jsfiddle。这里所说的一切都只是一个疯狂的猜测。

标签： jquery html css image

【解决方案1】：

您是否检查过“Firebug”导致偏移的原因？我知道有些浏览器给uls margin-left，而其他浏览器给他们padding-left - 也许你忘了重置两者？

【讨论】：

【解决方案2】：

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

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

【讨论】：

感谢您对跨浏览器功能的有用见解。这是我问题的主要焦点。

【解决方案3】：

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

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

【讨论】：