2012-02-25 74 views
0

我有一個小問題。每當我將鼠標懸停在「搜索引擎優化」選項,我在IE導航,導航打破&移動到側面。這在Firefox中不會發生。將導航更改爲位置:絕對修復它,但隨後主要內容將與導航合併。全部驗證。任何幫助將非常感激!導航懸停打破了IE

http://www.joemarketeer.com

http://jsfiddle.net/eoJ1/Ra4tR/

由於負荷!

+0

你可以將你的代碼縮減到相關的部分,而不是整個頁面?使其更易於調試。 – 2012-02-25 14:57:46

+0

完成:) http://jsfiddle.net/eoJ1/u35mS/ – Joe 2012-02-25 15:15:11

+0

首先,在Chrome上您網站上的藍色背景中的鏈接沒有顯示下面的行上懸停。但是,他們在jsfiddle示例中顯示。 – 2012-02-25 15:21:32

回答

0

navleftnavright div獨立調整大小,這是根據您的設計結構預期的。但它看起來奇怪,因爲它歸結於以下內容的頂部:

Bad content reflow with resize

一個建議,我可以給你是不是來設置%的導航欄的寬度,你已經爲這兩個div的完成。如果設置一個固定的寬度(以像素)或完全除去寬度規範(在這種情況下,這將需要在其內的內容的寬度),水平滾動條將出現在網頁下面當寬度小,這我想是細。此外,由於他們打破的文檔中的內容的流量和更容易打破布局中使用盡可能少的float S作爲可能的。這兩個div都有一個float:left,可以傾倒更穩定的解決方案。我說這一切是因爲我認爲由於這些原因,懸停佈局的破壞正在發生。如果你能照顧到這一點,你的問題可能會消失。

所以我的建議是有一個nav div與width: 100%。在這裏面有兩個div:navleftnavrightdisplay:inline和寬度a。)在px中指定或根本沒有,或b。)以%指定,但在px中有一些min-width。如果您沒有指定任何寬度爲navright,它將展開以填充右側的所有空間。

這樣這兩個div不會獨立迴流。

基本上,玩玩具更多,直到你得到更好的CSS命令;我認爲更多的經驗會自動幫助你理清這樣的問題。

+0

對不起,回覆遲了,我需要淋浴。 嗯,KK。你有什麼想法替代浮游物?我給了這個嘗試:http://blog.betabong.com/2009/02/25/css-alternative-to-left-float/並沒有幫助。謝謝! :) – Joe 2012-02-25 17:25:16

+0

其實,我已經設法解決它 - 我被告知要避免邊緣頂部,因爲IE不喜歡它。它設法修復它。它可能有點笨重,但它的工作原理。感謝加載所有的幫助! :) – Joe 2012-02-25 17:37:24

+0

編輯我的答案。 – 2012-02-25 18:39:25