網頁設計跨瀏覽器的CSS Hacks應用技巧一
設計跨瀏覽器網頁設計經常要在不同瀏覽器版本之間進行微調,調整的地方不一定只有 CSS 樣式,我們有時候會為了避開一些瀏覽器在特定版本下的 JavaScript 臭蟲,也會需要針對不同的瀏覽器版本撰寫不同的程式碼來因應,在這篇文章裡我會介紹各瀏覽器 CSS Hack 技巧以及 IE 條件式註解,幫助各位更輕易的設計出跨瀏覽器網頁設計。
瀏覽器 CSS Hacks 技巧,撰寫 CSS 樣式時必須瞭解到樣式套用順序的觀念,也就是越晚定義的樣式,優先權越高!
舉個例子來說,如下 .page 這個樣式重複定義了 width 屬性,因此真正被套用的 width 屬性應該是 95% 這個值才對。
.page {
width: 90%;
width: 95%;
margin-left: auto;
margin-right: auto;
}
不只單一則樣式裡的屬性可以重複定義,連整條樣式也能夠重複定義,一樣也是比較晚定義的樣式會蓋掉先前定義的樣式,如下範例 .page 這個樣式最後生效的 width 屬性會是 100% 才對。
.page {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.page {
width: 100%;
}
無論是 IE、Firefox、Safari、Opera 或 Chrome 瀏覽器,在解析一份 CSS 樣式表時多少都會有些不一樣的行為,但是都有一個共通的特性,那就是當瀏覽器無法解析其中一段 CSS 樣式或屬性時,就會自動忽略這一段的樣式,進而解析下一段樣式。所謂的 CSS Hack 技巧,講的就是找出不同瀏覽器版本之間不同的 CSS 解析規則,好讓網頁設計所定義的 CSS 樣式可以讓該樣式在特定瀏覽器版本下無法辨識,但另一個版本的瀏覽器可以辨識的技巧,也是因為這類「小技巧」十分神奇,所以才被稱為 “Hack”。
備註:筆者倒覺得 CSS Hack 的神奇之處不是他的語法特別,而是為什麼有人可以找的到這麼多怪異 CSS 語法,國外還有些人會寫許多測試案例設法找出各種可能的 CSS Hacks,真讓人佩服。
轉貼來源: Will 保哥的技術交流中心
參考文獻:
1.梁定澎主編。「電子商務理論與實務」。第十章網路行銷。(檢索日期2008/03/12)。
2.CR & LF 研究所著,博碩文化編譯( 2006 )。配色王:最能激發創意與觸動人心的配色技法。
3.王樂成、林祐聖、葉欣怡(譯)(2002 )。James Slevin 著。網際網路與社會,(Internet and society)。台北:弘智。
相關文章
網頁設計內的原始碼上方的DOCTYPE宣告(網頁標準化宣告)網頁設計採用UTF-8的編碼格式,要注意Meta標籤和title標籤的順序問題迎接HTML5網頁設計來臨,10個好用的小工具介紹為手機開發專用的網頁設計架構公司的網頁很慢,若想換別家的虛擬主機,要怎麼換?
最新文章
HVACKer:入侵隔離網絡的新型攻擊技術還有什麼不會被入侵?路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌,最狂的是一家估值 124 億美的數據分析新創!【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala,下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了