幫助將圖像滑塊從img's更改爲li的

我花了很多時間試圖弄清楚如何讓這個滑塊使用li的背景圖像而不是img的。幫助將圖像滑塊從img's更改爲li的

原因是我打算使用滑塊Wordpress &許多Wordpress主題將自己的CSS屬性應用於圖像（如'max-width'），這將經常打破滑塊。我會很感激，如果任何人都可以檢查出下面的腳本，並將其改變爲與李氏一起工作:)我一直在嘗試自己，但由於某種原因，它會做的是永遠永遠不會顯示任何圖像..

這裏是腳本：

http://pastebin.com/8J9uwRtZ

在此期間，我會繼續努力想出解決辦法我自己。如果有人能幫助我，我將不勝感激。

這裏是一個測試網站的滑塊不適用主題'主題'，它適用於100％的'最大寬度'圖像&一個主題的例子沒有（因此滑塊完美的作品）。僅供參考從「專題」中刪除最大寬度&其他主題每次修復滑塊，所以這絕對是問題所在;因此我爲什麼要使用li而不是img。

http://www.matthewruddy.com/demo/ < - 不工作

http://www.matthewruddy.com/demo/?preview=1&template=twentyten&stylesheet=twentyten&TB_iframe=true < - 工作

由於任何人誰可以幫助！馬修。

來源

2010-08-17 Matthew Ruddy

你嘗試只是創造一種風格，更具體的選擇了設置你的滑塊的圖像風格滑塊的imgs？ – akonsu 2010-08-17 15:47:38

這樣做有什麼意義？如果'max-width'應用於主題中的所有圖像（egimg {max-width：100％;}），那麼應用寬度設置的CSS類將不會有所作爲。 – 2010-08-17 16:09:15

有'max-width：none'，這就是你要找的。你只需要像akonsu說的那樣使用一個更具體的選擇器，如果你想確保沒有主題會意外地覆蓋你的規則，即使使用'！important'。 – gonchuki 2010-08-17 16:53:15

正如akonsu所說，你最好的選擇是將特定的圖像風格應用於lof類。由主題image.css文件定義的默認樣式僅適用於..您猜對了..默認圖像。在lof類中正確地重新定義它將覆蓋該規則並使用新的樣式。如果您的瀏覽器似乎還沒有完成它，請將大胖子！重要的添加到樣式規則的末尾，除IE6之外的所有內容都會將其剔除。

最大寬度僅應用於沒有其他特定規則的圖像，因此「級聯」樣式表。重要的CSS規則優先於相同類型的其他規則。通常，在CSS中，規則從上到下工作，所以如果您爲樣式表下方的元素或次樣式表中的元素指定了新樣式，則後面的規則優先。重要的是確保這個規則優先。即：

p { color: blue !important; } 
.container h3 { do stuff } 
.container p { color: red; }

在除IE6瀏覽器的每個字體顏色爲所有段落元素只要會是藍色作爲您的文檔類型的設置正確，你沒有得到扔進怪癖模式。然而，做這樣的事情：

p { color: blue; } 
.container p { color: red !important; }

只顯示容器中所有段落元素的紅色字體顏色，對於所有瀏覽器。這是有效的，因爲即使IE6不理解！重要規則，它仍然完全理解級聯規則，並將根據上次定義的內容應用樣式。

所以你的情況，下面的規則工作得很好，並修復您的顯示問題在IE中：

ul.lof-main-wapper li img { max-width: none !important; }

來源

2010-08-17 17:46:02 Jervis

幫助將圖像滑塊從img's更改爲li的

回答

相關問題