CSS技巧：!important和空格的組合技巧及其他

先溫習一下對於IE的box-model的破解    
IE box-model這個臭名昭著的bug存在於IE6/Win以前的每一隻版本，這個蟲子直到tantak發佈了流傳最爲廣泛的那個hack纔開始被馴服。    
   
http://www.tantek.com/CSS/Examples/boxmodelhack.html    
IE5.X/win對box-model的解析是一樣的，他們認爲width包括了邊框(border)和補白(padding)，幸運的是這個情況在IE6中有了好轉。    
   
但是IE6在向後兼容的同時也包容了以前的錯誤，IE6其實有兩個核心，在舊的頁面前他仍舊錶現出對錯誤的寬容，只有在文檔中嚴格地加上文檔類型(DOCTYPE)聲明，IE6才能夠接受正確的box-model。    
   
所以，tantak的hack必須和正確的DOCTYPE同時包含在文檔中才能夠正常工作    
   
div.content {...}{     
width:400px; //這個是錯誤的width，所有瀏覽器都讀到了    
voice-family: ""}""; //IE5.X/win忽略了""}""後的內容    
voice-family:inherit;    
width:300px; //包括IE6/win在內的部分瀏覽器讀到這句，新的數值(300px)覆蓋掉了舊的    
}     
html>body .content {...}{ //html>body是CSS2的寫法    
width:300px; //支持CSS2該寫法的瀏覽器有幸讀到了這一句    
}     
   
現在回到主題，我們經常看到!important和(空格)/**//**/:組合在一起使用，這個寫法有什麼奧妙呢？    
   
看剛纔那個寫法，我這裏可以提供另一種寫法也能達到這樣的效果    
   
div.content {...}{     
width:300px !important; //這個是正確的width，大部分支持!important標記的瀏覽器使用這裏的數值    
width(空格)/**//**/:400px; //IE6/win不解析這句，所以IE6/win仍然認爲width的值是300px；而IE5.X/win讀到這句，新的數值(400px)覆蓋掉了舊的，因爲!important標記對他們不起作用    
}     
html>body .content {...}{ //html>body是CSS2的寫法    
width:300px; //支持CSS2該寫法的瀏覽器有幸讀到了這一句    
}     
同樣，這個方法仍必須依靠正確的文檔類型聲明才能夠正常工作，原因在前面已經說過。    
   
文檔類型聲明就像一個開關，打開向後兼容的未來，而錯誤使用的話，就是一個Pandora box。