取決於文本行的自動CSS樣式

我對不同瀏覽器的CSS樣式有問題。我認爲它只與歌劇有關（僅在歌劇中發現這個問題，用opera，firefox和chrome進行測試）。所以我有一個頁面，其中是無序列表，每個列表項目符號是不同的圖像（但大小相同）。我在每個li元素中對齊圖像和文本，文本位於中心（水平方向）。每一個李有一行或兩行的文字。當有兩行文本時，我不需要使用頂部填充，只需填充底部填充。當有一行文本li時，我使用頂部和底部填充，以正確對齊文本。取決於文本行的自動CSS樣式

歌劇似乎很好，但是當我開啓chrome和firefox時，一些李文本是在2行裏，歌劇裏的相同李文本在一行中。 opera的問題在於，它根據視圖縮放的多少來改變文本間距。 chrome和firefox都不會改變文本間距無關緊要地縮放多少頁面。

爲了使它更清楚，這裏有例如它的外觀上戲取決於它有多少縮放：用於unorded列表 Opera view

我的CSS樣式：

li.top{ 
padding-top:9px; 
} 
li.bottom0{ 
padding-bottom:6px; 
} 
li.bottom { 
    padding-bottom: 13px; 
} 
    li.bottom2{ 
padding-bottom:15px; 
} 

.li-meetings { 
    list-style-type: none; 
    background:url(wp-content/uploads/2012/07/calendar.gif) no-repeat; 
    padding-left: 50px; 
} //all li element styles are the same, just differs uploaded image

所以問題會有什麼辦法來改變CSS樣式取決於li有多少文本行（並且在放大和縮小時動態地改變它）。或者也許有更好的更簡單的方法？

來源

2012-08-09 Andrius

通過在「查看」 - >「縮放」下選擇「僅縮放文本」，您可以在Firefox中獲得與Opera相同的效果;你真的不應該有依賴於需要多少行來顯示文本的類;小屏幕尺寸會發生什麼？我猜文本會包裝成多行 - 你的CSS可以處理這些情況嗎？ – feeela 2012-08-09 11:48:04

好的，我該如何處理該文本，以便它在主要瀏覽器上正確顯示？我的意思是如果我改變填充以使一個瀏覽器看起來很好，另一個li元素彼此靠得太近或彼此距離太遠 – Andrius 2012-08-09 11:58:49

您不應該依賴文本框的尺寸。嘗試使用像這樣的通用解決方案：http://jsfiddle.net/jhmVf/3/

來源

2012-08-09 15:14:42 MatTheCat

我試過這種方法，但由於某種原因它不能正確對齊（在wordpress中）。我設置了所顯示的所有內容，但出於某種原因，文字比圖像更低。 – Andrius 2012-08-10 06:32:11

取決於文本行的自動CSS樣式

回答

相關問題