菜單填充問題自FireFox 4

我已經檢查了其他問題在這裏，但我還沒有找到任何幫助我的東西。菜單填充問題自FireFox 4

自FireFox 4發佈以來，我一直在我的網站上的菜單有問題。

www.ffxivinfo.com

正如你可以看到，菜單應該沿着小圖形按鈕配合，使每個環節上的「按鈕」。在Chrome中，IE8（未檢查9）和FireFox 3.5這看起來很完美。但是，由於FireFox 4它顯示錯誤。

看起來這是一個填充問題，但我不知道它來自哪裏。我甚至刪除了每個鏈接之間的填充，使它們靠得很近（0填充），但菜單仍然比其他瀏覽器中的FireFox 4+更向右延伸。

我使用purecssmenu.com上提供的自動生成的菜單，並對其進行了修改以適合我自己的網站。

這裏是一個鏈接，只是導航代碼，我用一個PHP include來插入它。 http://www.ffxivinfo.com/nav.php

這裏是一個鏈接到它的CSS。 http://www.ffxivinfo.com/navstyle.css

基本上我需要導航在所有瀏覽器中看起來都一樣，以便它適合圖形「按鈕」。我試圖放棄目前的設計並採用簡單的漸變背景，並且在FireFox 4+中將菜單放在比其他瀏覽器更寬的地方，但這有點失敗。

任何幫助將不勝感激。這是編碼問題第一次將我送到論壇尋求幫助，但我無法弄清楚這一點。

來源

2011-09-02 David

看起來好像沒什麼問題在FF6 –

我相信問題不在於您的利潤空間，而是由於瀏覽器之間文本呈現的差異。在這種情況下，Firefox正在將文本渲染得更寬一些。

如果我可能會建議一個替代方案，而不是使用圖像背景並希望進行像素完美渲染（這種情況在考慮到瀏覽器和操作系統的多樣性時不太可能）嘗試使用背景顏色爲鏈接本身設計樣式邊界半徑。

來源

2011-09-03 00:32:18 ajsharma

哇我甚至不知道存在邊界半徑。我還不熟悉所有的CSS3功能。我可以砍掉那麼多代碼，試圖用CSS2爲我的頭文件破解圓角。我喜歡這個選擇，但是我仍然想找到一個解決方案，因爲當它們以這種方式展開並且用戶登錄（菜單中的不同鏈接）時，這組鏈接對於FireFox中可用的空間顯得太寬。 – David

正如我所說，我認爲你的核心問題是由於文本渲染的差異。嘗試使用'background-color'作爲鏈接，而不是整行的圖像。 'border-radius'可以讓你在大多數現代瀏覽器上擁有圓角，而對於舊版本的瀏覽器則有一個方形背景（在大多數情況下是可接受的後備）。 – ajsharma

我在FF6中看不到問題。但是，我看到你在pt中指定你的字體大小。 pt用於打印，而不是網頁。嘗試將其更改爲px，看看是否能解決您的情況。

來源

2011-09-03 01:17:39 Rob

這很奇怪。它出現在FF6中，自FF4以來，在所有版本中都有。 http://img689.imageshack.us/img689/6707/ff6menu.jpg px vs pt真的很重要嗎？我可以試試看。 – David

我嘗試在網站的非實時版本中將pt字體大小更改爲px以進行測試。它使它看起來更好，但它仍然是錯誤的。在px中，就像每個鏈接比Chrome中的寬度要大一個像素。所以當你到達最後一個鏈接的時候，它的大小約爲10像素。當然，我可以改變圖像來解釋這一點，但在Chrome和大概是IE9中這是錯誤的。我想我可以接受這一點，並使用我發現的由於ajsharma而發現的邊界半徑。當我建立這個網站時，我甚至不認爲CSS3被使用。我很好奇爲什麼在你/其他人的FF6中看起來很好。 – David

我可能會忽略Firefox 4的問題。

FF現在是第6版

您的問題不會出現在FF3.5（使用最廣泛的FF）或FF6，兩者都具有比FF4更多的瀏覽器份額。

http://gs.statcounter.com/#browser_version-ww-monthly-201008-201108-bar

來源

2011-09-03 03:00:53

它出現在FF6對我來說... http://img689.imageshack.us/img689/6707/ff6menu.jpg – David

嗯..我正在做什麼其他人不得不說FF6沒有問題。 –

菜單填充問題自FireFox 4

回答

相關問題