無序列表中的列表項之間的輕微差距

希望有人可以提供幫助，我正在使用一個無序列表，其中實際的列表項目具有圓角矩形背景圖像。無序列表中的列表項之間的輕微差距

我的問題是，Firefox中的列表項目之間似乎有一個微小的差距，但在谷歌瀏覽器中，沒有差距。

如果我更改了CSS行高值，它會在Firefox中進行更正，但會導致谷歌瀏覽器崩潰。

關於我需要做的任何想法，因爲我認爲我做錯了一些事情來確保每個列表項之間在Firefox和Google Chrome之間沒有差距？

謝謝。

來源

2010-07-30 tonyf

您可以發佈一個鏈接，以便我們可以看到它是什麼樣子？ – NullUserException 2010-07-30 22:34:31

你有一個CSS重置？ – Sinan 2010-07-30 22:37:22

最好的辦法是重置您<li>和<ul>所有填充/利潤率，然後添加填充回到根據需要爲背景圖像：

ul, li { 
    padding: 0; 
    margin: 0; 
}

不同的瀏覽器採用不同的默認補白/利潤率名單，所以你需要剝去它的一致性。

來源

2010-07-30 22:43:51 Pat

您是否嘗試過負餘量？

li { margin-bottom: -2px; }

這些跨瀏覽器的像素缺陷將一直存在，這個邊緣技巧通常會在調整佈局時節省大量時間。

來源

2010-07-30 22:34:15

幾分鐘前我遇到了這個問題，發現了一個簡單的修復方法，但尚未在此發佈。我嘗試改變邊距和填充，但這並不起作用，所以我將所有LI元素的左邊都浮起來，並且它完美地工作。我已與我的博客截圖的例子：http://www.thomasvendetta.com/css/gap-in-unordered-list-displayed-inline/

托馬斯怪客

來源

2011-06-14 20:08:49

無序列表中的列表項之間的輕微差距

回答

相關問題