css hack 是在標準 css 沒辦法相容各瀏覽器顯示效果時才會用上的補救方法,在各瀏覽器廠商解析 css 沒有達成一致前,我們只能用這樣的方法來完成這樣的任務。
最近的專案要針對 firefox 瀏覽器的css樣式進行 特別處理,可愛的 firefox 居然不支援 text-overflow 屬性(不過事後發現 firefox8.0 已經支援了，firefox醬…你也更新得太快了吧，後台那邊大部分還是3.6的說，你說叫我情何以堪呢)，所以順帶梳理下各個瀏覽器的 css hack 寫法。
以這個 html demo為例來介紹各個瀏覽器的 css hack 方法： 1
2 我們可愛的 ie 常常給我們帶來各個神奇的問題，增加我們對她的仇恨值（特別是 ie6、7，你們懂的），所以對於我們前端來說， ie的 css hack 應該不陌生：
css hack for ie6
這種是針對 ie6- 瀏覽器的 css hack，具體有 2 種寫法：
寫法一 1
/* css document ie5.5 ie6 css hack */
2.tl
寫法二
1/* css document ie5.5 ie6 css hack */
2* html .tl
其中 第二種方法能通過 w3c 驗證。
css hack for ie7
針對 ie7 瀏覽器的 css hack 大致有3種寫法：
寫法一 1
/* css document ie5.5、ie6、ie7 css hack */
2.tl
寫法二
1/* css document ie7 css hack */
2*+html .tl
其中 第二種方法能通過 w3c 驗證。
css hack for ie8
針對 ie8 瀏覽器的 css hack 大致有2種寫法：
寫法一 1
/* css document ie5.5、ie6、ie7、ie8 css hack */
2.tl
寫法二
1/* css document ie8 css hack */
2.tl
css hack for ie9
寫法一 1
/* css document ie8、ie9 css hack */
2.tl
寫法二
1/* css document ie8、ie9 css hack */
2.tl
第乙個使用了 body:empty 來區分 firefox 1 和 2 。第二個 hack使用了全部 firefox 瀏覽器的專有擴充套件 -moz。 -moz- 只對 firefox有效，使用這個 hack 大可不必擔心其他瀏覽器的影響。 1
/* css document firefox 1、firefox 2 css hack */
2body:empty .tl
1/* css document firefox css hack */
2@-moz-document url-prefix()
4}
1/* css document opera css hack */
2@media alland (-webkit-min-device-pixel-ratio:10000), not alland (-webkit-min-device-pixel-ratio:0)
4}
1/* css document chrome、safari css hack */
2@media screenand (-webkit-min-device-pixel-ratio:0)
4}
css相容ie寫法
width auto 是寬度自動的意思。9是hack css 的一種寫法，這種在正常css 後面加 9 的方式，只有ie瀏覽器才能識別，其他瀏覽器會忽略這條語句。這樣就能做到差異化瀏覽器，來達到相容瀏覽器的目的。對此，還有其他hack css的寫法。如 color red 一般瀏覽器識別，字型顏色為...
IE8下CSS寫法的幾點心得
今天總算公升級到ie8了，感覺css的寫法要想同時適應ie6 ie7 ie8 firefox，有以下幾個基本的竅門。1 使用float後必須clear，否則ie8顯示錯誤。2 h1,h2,h3,ul,li,dl,dt,dd,p.最好定義margin 0和padding 0，否則各種瀏覽器顯示有誤差。...
css 相容IE和FF的寫法
ie和火狐的css相容性問題歸總 css對瀏覽器器的相容性具有很高的價值，通常情況下ie和firefox存在很大的解析差異，這裡介紹一下相容要點。1 doctype 影響 css 處理 2 ff div 設定 margin left,margin right 為 auto 時已經居中,ie 不行 3...