2011-04-06 56 views
0

請看看這裏:http://fastforwardacademy.com/然後看看這裏:http://fastforwardacademy.com/index-page-irs-paid-registered-tax-preparer.htmFirefox水平菜單麻煩,所有其他瀏覽器都很好

在其他所有瀏覽器中...... IE,Opera,Safari和Chrome都沒有問題,但Firefox不能正確顯示菜單。看看CSS有沒有人有任何想法,爲什麼?

+0

哪個菜單以及哪個版本的FireFox?我正在使用FF4,並且一切似乎都與IE8匹配。 – kjl 2011-04-06 20:15:02

回答

0

問題是填充.main_nav ul li a:hover, .main_nav ul li.current。當您單擊鼠標並第二次懸停並且導致鏈接失去對齊時,將應用填充。懸停時不需要填充。

.main_nav ul li a:hover, .main_nav ul li.current

添加

.main_nav ul li a:hover{ 
padding:0; 
} 
+0

在懸停之前它實際上沒有對齊,所以這個解決方案不起作用。 – ffaadmin 2011-04-08 12:03:34

+0

根據您的第二個鏈接激活時它沒有對齊 – Hussein 2011-04-08 18:36:01

+0

正確,我嘗試了您提供的填充解決方案,但似乎沒有更正它。 – ffaadmin 2011-04-08 19:23:18

1

的根本原因是,你的HTML悲慘是無效的:

http://validator.w3.org/check?uri=http%3A%2F%2Ffastforwardacademy.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

有問題的特定錯誤是這樣的:

線126,柱103:文檔類型 不允許元件「LI」這裏

…decoration:none;"><li class="current1">HOME<br /><span>Fast Forward Academy</s…

上面提到的元件的 上下文,其中它是不允許被發現。此 可能意味着您錯誤地嵌入了元素 - 例如「body」部分中的「style」 元素,而不是內部「head」中的 - 或重疊(這是不允許的)兩個元素 。

你嵌套一個a元素中的li元素(也ul元素內)。這是無效的,並導致Firefox,我們應該說,嘔吐?

字的一個合適的選擇,因爲有關Firefox的錯誤被稱爲..

The Vomit Bug

你的源代碼看起來是這樣的:

<ul> 
    <a href="index.php" name="Fast Forward Academy" style="text-decoration:none;"> 
     <li class="current1">HOME<br /><span>Fast Forward Academy</span></li> 
    </a> 
    .. 
</ul> 

但Firefox(版本3,這在Firefox 4中固定)將它彈入此(使用Firebug進行檢查)

<ul> 
    <a style="text-decoration: none;" name="Fast Forward Academy" href="index.php"></a> 
    <li class="current1"> 
     <a style="text-decoration: none;" name="Fast Forward Academy" href="index.php">HOME<br><span>Fast Forward Academy</span></a> 
    </li> 
.. 
</ul> 

因此,修復方法是將您的a元素放置在您的li元素中,而不是其他方式。你也必須切換一些CSS。


在一個不相關的說明..

你的文檔類型是:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

但源代碼的下一行是這樣的:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

和你使用<br />

可能想改變你的文檔類型爲此; XHTML Transitional文檔類型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
+0

如果錨點位於列表標記之內或之外,Firefox無法顯示其他瀏覽器沒有問題的菜單,這似乎沒有什麼區別。感謝其他建議,我們將實施它們。 – ffaadmin 2011-04-08 12:04:59

+0

當然,它是有區別的。我不知道如何讓它更清晰 - 我的回答已經非常詳細。看看''你的源代碼看起來像這樣''和''下的標記'下的標記'但是Firefox ......將它們放到這裏'' - 如果你交換了錨點位置,那麼Firefox就不會再陷入它了。如果您使用*無效的HTML *,那麼您應該期待這樣的跨瀏覽器問題。 – thirtydot 2011-04-08 12:34:19

+0

詳細與否,Firefox不在意錨點位於列表標記之內還是之外,因爲當IE,Chrome,Safari和Opera沒有任何問題時,它仍會錯誤地顯示菜單,我不知道爲什麼。 – ffaadmin 2011-04-08 19:22:34

相關問題