PIECE2巨群
網頁設計 ‧ 平面設計 ‧ 虛擬主機 ‧ 網路行銷
最新消息
資訊分享
關於我們 服務項目 客戶案例 製作流程 虛擬主機 聯絡我們
網頁設計跨瀏覽器的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,下一步拓展東南亞市場
快可以用手機遠端遙控你的所有家電了



 
PIECE2巨群 版權所有 © 2008 總公司:06-2895301 台北:02-82529838 台中:04-25152530 高雄:07-7931226
驗證 CSS 驗證 W3C
專精項目:網頁設計   網站設計   平面設計   包裝設計   關鍵字行銷   關鍵字排名   網路行銷   網站代管   虛擬主機   ERP系統