[Blogger筆記]跨瀏覽器CSS語法

　 耗費眼力的CSS網站標準化

　　這幾天，雪球媽下定決心把 E-Snowball 的自製範本進行大翻修，現在 IE 的各版本和 Firefox 中終於有了均一化的面貌，話說做 skin 真的是磨時間加耗眼力的工作，尤其是對於之前隨興又沒系統的 CSS ，真是比重作還令人頭昏呀！一開始就整整齊齊地寫好真是一門很重要的課題。

　　瀏覽器之間最麻煩吊詭的部分，就是明明一個瀏覽器裡看起來十分完美的模版，到了另一個瀏覽器則呈現得亂七八糟，網頁元素位置一團混亂，以前 IE 獨霸的時代，在 Dreamweaver 等網頁編輯器中大都能體驗編輯即所見的美好（多令人懷念啊！），現在則根本沒有那回事，比如寬度設為 100px （ .test {width:100px} ） 的一個簡單動作，卻可能每個流覽器硬是解讀成不同的大小，此時，除了用CSS細修之外別無他法。

　　有更多的瀏覽器可供選擇，激勵開發者良性競爭固然是好事，像我自己也十分鐘愛 Firefox ，因為重啟時顯示上次瀏覽的分頁這項功能實在是太好用了！但是，頻繁的改版與轉換版本的過渡期，真是會讓網頁設計師頭痛不已。

　　令網站擁有均一化外觀的 CSS 語法很簡單，但是實際應用到每個區塊時，是十分複雜繁瑣的工作，尤其在無法編輯即所見的狀況下，只好不斷地刷新預覽和不斷地嘗試，是設計者實作經驗及細緻度的體現與考驗，擁有跨瀏覽器部落格模版的絕竅和 CSS 規則一樣簡單但不容易實踐，一言以蔽之，就是耐心。

by雪球媽

• IE及Firefox的CSS語法區別規則

　　區別IE及Firefox，語法順序 Firefox在前，只希望Firefox讀取之語法，在;前加入!important。

.test　{
　display: inline　!important;　/*　Firefox讀取此行　*/
　display: block;　/*　IE讀取此行　*/
}

• IE6、IE7及Firefox的CSS語法區別規則

　　語法順序Firefox、IE7、IE6，在僅由IE7及IE6讀取的CSS前分別加入#和_。

.test　{
  　display: inline;　/*　Firefox讀取此行　*/
　#display: block;　/*　IE7以上版本的讀取此行　*/
　_display: table;　/*　IE6以下版本讀取此行　*/
}

*Update*（2010/08/31）

• IE6、IE7、IE8及Firefox的CSS語法區別規則

　　語法順序Firefox、IE8、IE7、IE6，在僅由IE8、IE7及IE6讀取的CSS中分別加入\9、*和_。

.test　{
  　display: inline;　/*　Firefox讀取此行　*/
  　display: list-item \9;　/*　IE8讀取此行　*/
　*display: block;　/*　IE7以上版本的讀取此行　*/
　_display: table;　/*　IE6以下版本讀取此行　*/
}