哇寶部落格 » css

[CSS] IE6 模擬 position:fixed 純 CSS 解法

jaceju — Sat, 06 Jun 2009 04:19:31 +0000

我們都知道 IE6 不支援 position:fixed 。

但 position:fixed 真的很好用，像是廣告、選單這些頁面上常見常用的元素，需要固定在頁面上某個位置時，都可以用 position:fixed 來處理。

所以有很多網路上的先進想出了很多方法來解決 IE6 不支援 position:fixed 的問題，而大部份的解法都是採用 JavaScript 。可惜這些解法除了要擔心瀏覽器關閉 JavaScript 外，通常在移動時都會有抖動的跡象。

所以我就想找找看網路上有沒有純 CSS 解法，沒想到就找到了這篇： Fixing position:fixed for Windows Internet Explorer 。

直接來看範例：

fixed.html





Position:fixed on pure css


 


TEST LINE 
TEST LINE
TEST LINE
TEST LINE
...
TEST LINE
TEST LINE
TEST LINE



ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5

首先我們先把要捲動的部份用 div#wrapper 包起來，要固定的部份 (div#fixed) 則排除在 div#wrapper 之外；然後先對有支援 position:fixed 的瀏覽器做處理，也就是直接利用 position:fixed 來將 div#fixed 定位。

再來是 CSS 的部份：

html, body{
margin:0;
padding:0;
}
 
#fixed {
position:fixed;
width:380px;
top:0px;
right:100px;
}

接下來我們再針對 IE6 做處理，也就是用 * html 這個 hack ：

* html {
overflow: hidden;
}
 
* html body,
* html #wrapper {
height:100%;
overflow:auto;
}
 
* html #fixed {
position:absolute;
}

這裡的原理很簡單，就是將 div#wrapper 的高度設為與 body 同高， overflow 設為 auto 即可。

註：上面那篇參考文章裡只提到 body 要設為高度 100% 和 overflow 為 auto ，但我實驗的結果是連 div#wrapper 也要設成一樣，才會正常動作。

最後把固定的部份用 position:absolute 定住，這樣就完成讓 IE6 模擬 position:fixed 的效果啦~

abu — Thu, 14 May 2009 04:10:15 +0000

不管在設計前台或是後台，常遇到"選項"，要自己動手寫CSS，或是繪圖都需要一些時間，要如何才能更節省時間呢？

就是使用這套CSS選單產生器，整個方便起來，可由內建的樣板選擇想要的樣式，再編輯好按鈕文字，最後輕鬆按下輸出按鈕，選擇存放路徑，就完成了CSS選單，再將相關CSS和圖檔嵌入所需專案。

操作方式：

操作上，非常簡便，簡單四步驟，沖脫泡蓋送，就可以取貨了。

大致上整個軟體分三個大區塊 (四是輸出樣板按鈕，不算區塊) (可對照上圖)

區塊1：可在這邊新增選項，輸入的時候需注意中文部份有問題，可先產生，最後再修改原始碼就好。

區塊2：有很多預設的樣式可挑選

區塊3：所見即所得預覽，你設定的選項和樣式，會呈現在這

當所有手續都完成，輕鬆按下輸出按鈕 (區塊四)，就可以完成了。

雖然說瞭解CSS很重要，不過有方便的工具使用，也是能在開發上，省下更多力氣和時間

jaceju — Thu, 05 Mar 2009 09:42:24 +0000

有鑑於目前 CSS 排版越來越盛行，因此這次幫公司伙伴上的就是 CSS 排版的基礎觀念篇。

大綱如下：

附件為相關投影片與範例檔案。

另外相關說明可以參考我部落格的系列文章。