2009年8月12日 星期三

IE6 position:absolute 時使用Bottom的bug

這兩天在研究裝飾Blogger
在弄旁邊的綠色圓角區塊的時候,遇到了一點問題
我用的佈局



像這樣,用相對去包絕對
Header跟Floor用絕對配置去定位在最高跟最低位
因為當初作素材的時候沒注意到
導致Header的圖片過長
所以我才採取絕對定位(absolute )的方式去做














但是這樣缺出現了floor使用bottom去固定在底部的時候,floor整個走位的問題
floor跑去Container下面非常多的地方
後來發現這是IE6的一個Bug,必須在Container設置height:1%
像這樣

.container{
position:relative;
height:1%;
}

這樣才能避免用Bottom走位的問題

題外話
我當初在作素材的時候沒設計好,Header弄太長,導致會蓋住中間Content的底圖
但是用z-index卻又會造成漸層色沒辦法搭配好還有色差出現
這是當出架構沒有設計好出現的錯誤

照我一開始的設計,content跟content background是綁在一起的,
導致不是Header檔住content,或是反過來content backgroung檔住header


後來靈機一動,我是否能把content跟content backgeound分開?
就像下圖這樣


可以做到這樣的話,我就可以用Header照住Content Background 而不會遮住Content了
因此我只要多一層Div取代Content Background就可以了,如下


不過我後來floor就沒有用absolute 去定位了,只讓他直接掛在Content之下
因為發現如果Container的size有伸縮的話,IE6底下floor用絕對定位不會跟著改變position
導致整個版面變亂,雖然Firefox是會跟著調整position,但是還是力求統一


最後做個筆記,在弄z-index的時候要把position設定成absolute或relative,不然他不會起作用

沒有留言: