2010-08-27 68 views
1

嗨我已經創建了一個固定的導航欄/標題在頁面的頂部與下面的內容。在所有的瀏覽器上,如果我在頁面上滾動,內容會在固定位置下導航欄除IE外(沒有意外的那裏)如何編輯CSS,所以這項工作?IE7 +位置:固定Z索引滾動不起作用

<div class="navbar" style="width:100%; position:fixed; left: 3px; top: 0px; z-index:1;"> 
blah blah blah navigation 
</div> 

<div class="content"> 
whats up, im the content and im really long so i need to scroll 
</div> 

這裏是一個在大多數瀏覽器中工作但不是世界IE的行爲的例子。

http://myivyleaguer.com/media/satcenter.html

+0

你錯過了最後一個';'在那裏的內聯樣式。 – Kyle 2010-08-27 14:00:53

+0

謝謝。那沒有修復它雖然 – JiminyCricket 2010-08-27 14:09:25

回答

2

您正在迫使IE瀏覽器進入怪癖模式,因爲你還沒有宣佈一個DOCTYPE(http://www.quirksmode.org/css/quirksmode.html)。

如果添加此: ​​

到您的HTML文件,然後位置的頂部:固定爲預期會工作。這是HTML5的文檔類型,簡短並完成了工作。

爲了得到該固定位置IE6的工作,以及,你需要添加到您的樣式表(我假設內嵌東西是隻爲你測試):

* html .navbar { position: absolute; } 

請參閱此頁(http://ryanfait.com/position-fixed-ie6/)以獲取解釋。

+0

我通常有內聯全部我的代碼,這是否會導致潛在的問題,或者它只是不好的做法?主要是我懶得轉移到一個單獨的樣式表 – JiminyCricket 2010-08-30 03:30:29

+0

添加doctype標籤工作!但它也打破了我的其他一些CSS。看起來像我需要更好地處理我的CSS。 – JiminyCricket 2010-08-30 04:01:01

+0

如果你依靠IE進入怪異模式,那麼你會發現切換到標準模式可能會破壞一些東西。但從長遠來看,這將會減少很多痛苦(並且您的頁面將在主要瀏覽器中更一致地呈現)。 內聯CSS本身不會造成任何問題,但它指出了更大的問題。你會發現人們對內容和風格的分離感興趣,但它確實有很好的理由,並且如果你的所有樣式都安全地放在了外部樣式表中,這將爲你節省大量的時間和精力。 – CherryFlavourPez 2010-09-01 08:33:50