在之前的博客CSS hack中我有提到，一個問題的解決讓我對CSS hack的態度從不屑一顧，到認真研究了實驗一下，事情是這樣的，最近產品發布，向來狂妄的我被一個bug糾纏住了，甚至喪氣的表示我做不出來，說來也慚愧，難住我的並不是造火箭這樣的難題，只是個背景圖片。。。
前世今生
最近為產品做了一個扁平化的新Theme，看起來很美觀，公司的藝術家看后表示需要一張有深意的背景圖片，發給我了
放上去后一看藝術家就是藝術家，果真和Theme很搭而且讓網站高端了很多（自我感腳），興沖沖的就發布了上去，主要代碼大概是這樣的
<html> <head> <title>Test</title> <style type="text/css" > body { height:100%; width:100%; background:url(images/bg.png); } </style> </head> <body> </body> <html>
很不錯的樣子
然而發布到產品測試站點后我的悲催一天就開始了，當頁面有縱向滾動條的時候，網頁是這樣的
細心的同學馬上就明白為什么了，圖片在縱向上repeat了，而圖片上下邊的顏色不一樣，在相接的地方不吻合，腫么辦呢?
修改背景圖片
相信大部分同學第一反應和我一樣，讓藝術家換個圖片,把圖片上下邊、左右邊的顏色修的一樣就可以了，但是！但是。。。藝術家不為所動,堅持這樣是最好的效果，好吧，展示技術的時候到了。
改變背景圖片size
既然圖片還得是這張圖片，那么就改變它的大小，讓其拉伸鋪滿整個網頁，使用window在設壁紙的時候不經常這么干嘛，可可可怎么該背景圖片的大小呢，用CSS3吧
background:url(images/bg.png);
-moz-background-size:cover;
-ms-background-size:cover;
-webkit-background-size:cover;
background-size:cover;
效果是這樣的
聰明的同學第一時間就會想到你讓IE可咋整？是呀，江湖傳言這樣就可以
background:url(images/bg.png);
-moz-background-size:cover;
-ms-background-size:cover;
-webkit-background-size:cover;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/bg.png,sizingMethod=scale);
哎呀媽呀，真好使
自己覺得很完美了，可可可，人家說你的效果已經不對了。
神馬！納尼！Where！
在IE下效果是對了，但是Chrome、Firefox下本來應該在中間的高亮區cover效果原因整個圖片長寬都被拉伸而被移到了右上角，不對稱了。。。
這這這
這可腫么辦，逼我，嚼爛了我的HB鉛筆后我寫了這樣的代碼（代碼寫在MasterPage中，所以不必擔心逐個頁面更改問題）
<html> <head> <title>Test</title> <style type="text/css" > body { height:1000px; width:100%; margin:0; } .cover { width:100%; height:100%; position:absolute; z-index:-10; } .cover img { width:100%; height:100%; border:0; } </style> </head> <body> <div class="cover"> <image alt="" src="images/bg.png"/> <div> </body> </html>
乍一看效果我還蠻開心的，可一拉滾動條
擦，你高度100%計算的是ViewPort的高度，不是scrollHeight啊！
固定住圖片
咬碎了一只HB之后我想到一招，既然剛才的方法差點兒都好使了，只有滾動的時候不好使，那么讓圖片相對於屏幕固定住就可以了，不隨網頁滾動而動，也就是使用position:fixed不就搞定了嗎
body { height:1000px; width:100%; margin:0; } .cover { width:100%; height:100%; position:fixed; z-index:-10; } .cover img { width:100%; height:100%; border:0; }
這次我按捺住了，拉了滾動條才敢樂
但是只樂了幾秒，因為我看了一下IE。。。，尼瑪！
關於怪異模式
因為網站是很久前寫的代碼，大家標准意識沒有那么前衛，處於對table 100%計算與padding沖突等原因，在設計的時候沒有加doctype，這就是耳聞能祥的怪異模式！
IE6本身就不支持position:fixed，這個還好，公司產品針對美國市場，不用兼容IE6了，但是IE所有版本在怪異模式下也不支持position:fixed，聰明的同學肯定會說前面你不說有MasterPage了嗎，在里面加上DocType不就可以了，我也是這么想的，但卻沒這么做，加上后之前寫的大部分控件還有很多頁面布局會亂掉，唉！一着不慎，滿盤皆輸，不能加DocType，腫么辦。。。
CSS hack
等了這么久主角CSS hack終於可以登場了，虧我沒去學導演，主角要指定砍我，也不必太激動，剛才不是使用-moz-神馬的了嗎，也算是露臉兒了，這次讓它領銜，看看怎么使用CSS hack讓怪異模式的IE也能有類似於position:fixed的效果
.cover { width: 100%; height: 100%; position: fixed; z-index: -10; _position: absolute; _top: expression(eval(document.body.scrollTop)); _left: expression(eval(document.body.scrollLeft)); }
本來前綴”_”只有IE6能夠認識，不過在怪異模式下所有IE都能認識，所以IE下hack代碼會覆蓋上面的代碼，可以expression表達式了解一下，還有在怪異模式下document.documentElement.scrollHeight這樣的寫法是取不到正確結果的，得像上面document.body.scrollTop這么寫，聰明的同學如果看過CSS hack也能夠很輕松的寫出正常模式下的code了。最后偷偷上傳個實際效果圖
最后
就是這么個東東，讓我對CSS hack有了新的認識