最近為産品做了一個扁平化的新Theme，看起來很美觀，公司的藝術家看後表示需要一張有深意的背景圖檔，發給我了
放上去後一看藝術家就是藝術家，果真和Theme很搭而且讓網站高端了很多（自我感腳），興沖沖的就釋出了上去，主要代碼大概是這樣的
很不錯的樣子
然而釋出到産品測試站點後我的悲催一天就開始了，當頁面有縱向滾動條的時候，網頁是這樣的
細心的同學馬上就明白為什麼了，圖檔在縱向上repeat了，而圖檔上下邊的顔色不一樣，在相接的地方不吻合，腫麼辦呢?
相信大部分同學第一反應和我一樣，讓藝術家換個圖檔,把圖檔上下邊、左右邊的顔色修的一樣就可以了，但是！但是。。。藝術家不為所動,堅持這樣是最好的效果，好吧，展示技術的時候到了。
既然圖檔還得是這張圖檔，那麼就改變它的大小，讓其拉伸鋪滿整個網頁，使用window在設桌面的時候不經常這麼幹嘛，可可可怎麼該背景圖檔的大小呢，用CSS3吧
效果是這樣的
聰明的同學第一時間就會想到你讓IE可咋整？是呀，江湖傳言這樣就可以
哎呀媽呀，真好使
自己覺得很完美了，可可可，人家說你的效果已經不對了。
神馬！納尼！Where！
在IE下效果是對了，但是Chrome、Firefox下本來應該在中間的高亮區cover效果原因整個圖檔長寬都被拉伸而被移到了右上角，不對稱了。。。
這可腫麼辦，逼我，嚼爛了我的HB鉛筆後我寫了這樣的代碼（代碼寫在MasterPage中，是以不必擔心逐個頁面更改問題）
乍一看效果我還蠻開心的，可一拉滾動條
擦，你高度100%計算的是ViewPort的高度，不是scrollHeight啊！
咬碎了一隻HB之後我想到一招，既然剛才的方法差點兒都好使了，隻有滾動的時候不好使，那麼讓圖檔相對于螢幕固定住就可以了，不随網頁滾動而動，也就是使用position:fixed不就搞定了嗎
這次我按捺住了，拉了滾動條才敢樂
但是隻樂了幾秒，因為我看了一下IE。。。，尼瑪！
因為網站是很久前寫的代碼，大家标準意識沒有那麼前衛，處于對table 100%計算與padding沖突等原因，在設計的時候沒有加doctype，這就是耳聞能祥的怪異模式！
IE6本身就不支援position:fixed，這個還好，公司産品針對美國市場，不用相容IE6了，但是IE所有版本在怪異模式下也不支援position:fixed，聰明的同學肯定會說前面你不說有MasterPage了嗎，在裡面加上DocType不就可以了，我也是這麼想的，但卻沒這麼做，加上後之前寫的大部分控件還有很多頁面布局會亂掉，唉！一着不慎，滿盤皆輸，不能加DocType，腫麼辦。。。
等了這麼久主角CSS hack終于可以登場了，虧我沒去學導演，主角要指定砍我，也不必太激動，剛才不是使用-moz-神馬的了嗎，也算是露臉兒了，這次讓它領銜，看看怎麼使用CSS hack讓怪異模式的IE也能有類似于position:fixed的效果
就是這麼個東東，讓我對CSS hack有了新的認識
本文轉自魏瓊東部落格園部落格，原文連結：http://www.cnblogs.com/dolphinX/p/3292997.html，如需轉載請自行聯系原作者