CSS：Hacks For IE6/IE7/FireFox

有時候我們在用CSS樣式表來製作網頁的時候，常常會發現在不同的瀏覽器裡面看到的樣子是不一樣的，最常遇到的就是IE6、IE7、FireFox之間的差異了。FireFox是採用網頁標準規範來製作的，能準確的解析出網頁標準格式；但IE6和IE7就不是這個樣子了，它們對於網頁標準的規範不如FireFox準確，而且同樣都是IE瀏覽器，不同的版本讀出來的東西竟然也不一樣！像IE6和IE7就不同，這很令人頭痛！

經過一段的測試，我無意間發現了一個方法，可以讓IE6/IE7/FF都能正常作用！只不過，這個方法可能已經有人比我早發現了！

今天我在找這個方法的時候，發現其實還是有很多網站有不同的寫法，但我認為最簡單的方法(和我用的方法一樣的…)，首先在awflasher.com的「解决IE6、IE7、Firefox兼容最简单的CSS Hack」上看到，不過他是在cmsproducer.com的Creating different CSS style selector definitions for different browsers (Firefox, Internet Explorer 7 and IE 6.0)上看到的。方法如下：

#yourDiv{
　padding:100px;
　#padding:200px;(#也可用*替換)
　_padding:300px;
}

意思是…"yourDiv"這個id，在FF(FireFox)的padding會顯示為100px的距離，在IE7是200px，在IE7版本以下(IE5、IE6)則會是300px。

換言之，FF只會讀取正確的語法，而不會讀取#或_開頭的語法；但IE7則會把#(或*)開頭的語法也讀進去，但略過_(底線)開頭的語法；IE7以下的舊版IE則會略過#開頭的語法，繼續讀取_開頭的語法。一般來說，愈後讀取的語法愈優先表示出來。

其它還有將IE7會讀取的#號換成+號或*號的，也可以去試試。

我把一些不錯的相關連結列在底下，提供參考：

• 解決IE6、IE7、Firefox兼容最簡單的CSS Hack
• CSS 處理不同瀏覽器畫面錯亂問題
• CSS Hack
• Will the browser apply the rule(s)?