Chrome，Firefox和Safari中的jQuery幻燈片

我目前在我的網頁上有一個由jQuery支持的小型幻燈片。Chrome，Firefox和Safari中的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文件去用它。但我不會在這裏包括它。

我知道事情在不同的瀏覽器中有不同的表現。但這是我第一次不得不使用它。所以我不確定如何防範這一點。

來源

2011-12-28 Johnrad

您發佈的代碼中沒有任何內容表示任何內容。這個問題很可能與其他周圍的元素或CSS有關。 – Scott

我明白這一點。我只是不明白爲什麼它在Firefox中的作品，但沒有別的。 – Johnrad

我被你的頭銜弄糊塗了。這與jQuery無關。沒有鏈接或jsfiddle。這裏所說的任何事情都只是一個瘋狂的猜測。 – Rob

你檢查過「Firebug」是什麼原因造成的偏移？我知道一些瀏覽器給ul s margin-left而其他人給他們padding-left - 也許你忘了重置兩個？

來源

2011-12-28 01:57:01 powerbuoy

你可以創建一個css類，它將元素完美地定位在當前給你帶來麻煩的特定瀏覽器上。接下來，確定正在使用哪個瀏覽器並調用與該瀏覽器相對應的css類。

有很多方法可以滿足跨瀏覽器功能 - 這只是一種方法。這一切歸結爲要求和偏好:)

來源

2011-12-28 01:30:17

感謝您提供有關跨瀏覽器功能的有用信息。這是我的問題的主要焦點。 – Johnrad

如果幻燈片中的所有圖像DIV'幻燈片'，這意味着jquery功能正常工作。所以真正的問題不在於你的jQuery腳本，而在於CSS文件。您僅爲幻燈片div元素提供了關於CSS的信息。你不應該離開UL和LI而沒有造型。

在創建您的網站之前重置您的CSS是非常好的做法。您可以按照http://meyerweb.com/eric/tools/css/reset/的說明進行操作。重置您的CSS將改變您的當前視圖，因此需要進行更正。

來源

2011-12-28 01:53:37 tetsujinsan

Chrome，Firefox和Safari中的jQuery幻燈片

回答

相關問題