瀏覽器專屬 CSS Hack:區分 Firefox / Opera / Safari / Internet Explorer

瀏覽器專屬 CSS Hack:區分 Firefox / Opera / Safari / Internet Explorer
CSS Hack 是在標準 CSS 沒辦法兼容各瀏覽器顯示效果時才會用上的補救方法,在各瀏覽器廠商解析 CSS 沒有達成一致前,我們只能用這樣的方法來完成這樣的任務。網上你可能能搜索到一大堆的 CSS Hack,但是我今天發布的你可能並不都很了解,因為這些都是只針對單獨一個瀏覽器的 CSS Hack。

49 Responses to 瀏覽器專屬 CSS Hack:區分 Firefox / Opera / Safari / Internet Explorer

  1. 任平生 says:

    這些 hack 好讓人抓狂啊。。。

  2. welee says:

    很好,比 sofish 那篇更詳細,連 Safari 都顧到了,不知有沒有 Chrome 的?我想如果想通過 W3C 的話用 JavaScript 來處理不知行不行…

  3. eddie says:

    呵呵有錯啊
    我用IE8查看,顯示我是囧IE7

  4. Showfom says:

    (*^__^*) 嘻嘻…… 開發一個合格的網頁得經過那麼多個瀏覽器,哎,生活真是累……

  5. fisio says:

    我老是把 moz 看成 maoz…

  6. 吖Bee says:

    呵呵,瀏覽器多是個問題!

  7. Leeiio says:

    @任平生
    研究這麼複雜的CSS Hack的人都是牛人~
    @welee
    Chrome用的和safari一樣的核心兩者應該相差無幾吧。
    @eddie
    呃,還沒考慮到IE8,你可以幫忙補充我更新進去呵呵!
    @Showfom
    生活就是折騰。
    @fisio
    你肯定暗戀人家。
    @吖Bee
    如果普及的標準能夠統一瀏覽器再多也不怕了~

  8. wlsy says:

    有之前好像有看到一個叫Conditional-CSS的也是對多瀏覽器寫不同hack

  9. 葉子 says:

    瓜牛你的頁面東西好多啊,眼花了

  10. Leeiio says:

    @wlsy
    Conditional-CSS就是文中提到的條件註釋,不過僅限IE瀏覽器呃。
    @葉子
    忙著畢業,沒時間折騰了。

  11. Kimcool says:

    老實說,你首頁太大了。

  12. Leeiio says:

    @Kimcool
    我也發現了,圖片太大了,很多冗餘js代碼,主要是沒時間,忙著畢業呵呵

  13. 葉子 says:

    文章首頁顯示部分的php語句怎麼寫的 😳 😳

  14. nsyta says:

    之前弄那個下載站的時候這麼學著人老外學過。。。當時很頭疼微軟把IE7 fix了很多針對IE 6的hack不管用了。。- -後來忘記怎麼解決了。。。

  15. nsyta says:

    上面打漏了。。。- -後來忘記怎麼解決了。。。最終無意中被我看到這種Hack就照葫蘆畫瓢居然管用了當時高興的- -

  16. Panther says:

    加你QQ了 ,找你幫點忙 呵呵

  17. vc says:

    幸好我們現在做的項目只要能在FF跑就行。
    PS:留言在opera下錯位了。

  18. Lucifer says:

    好文章
    IE 系列其實通過css 條件注釋 就全部解決了 所以IE 8倒沒關係
    個人覺得 能夠不用hack 還是不要用先
    真的沒辦法的時候再通過hack來解決兼容性問題

  19. Leeiio says:

    @ Lucifer
    我也是這麼個建議,能不hack則不hack~

  20. Pingback: RSSA頻道 » Blog Archive » CSS 3.0 中文參考手冊(CHM版)

  21. 愚人碼頭 says:

    💡 今天用到了,轉載了一下

  22. Pingback: JoyfulBoy » 前端技術 » XHTML CSS » 各款瀏覽器專屬的 CSS Hack

  23. Pingback: 專屬 CSS Hack – WEB前端開發- 專註前端開發,關注用戶體驗

  24. MOPVHS says:

    沒有標準真是可怕呢~~ ❓

  25. yss says:

    hao yang de! learn more, thanks

  26. 丸子 says:

    路過,純屬意外。不要回復我。。

  27. 小西 says:

    😛 很詳細,有些用過,有些收藏(希望不用去用到),
    然後說說我的看法,在我的實踐中,我不認為ie6是最難搞的,反而是ie7,
    最好搞定的當屬Webkit核。

  28. Pingback: » Blog Archive » 專屬 CSS Hack

  29. Pingback: 針對主流瀏覽器的各種專屬CSS hack « starhusb

  30. 腦腐亮了。不錯不錯

  31. Pingback: Although want to use less as far as possible, but still want to remember these CSS Hack

  32. 瞭然 says:

    閣下的文字讓我受益匪淺,非常不錯,謝謝!

  33. asdf says:

    很有用,非常感謝! 😛

  34. kael says:

    我遇到一個 Chrome下正常的,但是Safari下有問題的例子,可能是我代碼不夠規範,正考慮要不要用hack,同樣是基於webkit的內核,哎,前端的命苦啊,html5的時代快點到來吧。。。 😛 😛 😛

  35. 櫻子 says:

    樓主應該吧chrome也加進去~~~

  36. jackness says:

    嘿嘿,好文章,寫得比較全面,如果 有 chrome 的話就更完美了

  37. Pingback: 瀏覽器 CSS Hack 整理 ‹ 龍貓の筆記

  38. violet says:

     補上chrome的:
    針對Chrome和Safari等Webkit核心瀏覽器的CSS hack代碼:

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Webkit內核兼容CSS */
    }
    示例:

     @media screen and (-webkit-min-device-pixel-ratio:0) {
    .font1 {color:#f00}
    .border1 {border:1px solid #f00;}
    .bg3 {background:#f00;}
    }

  39. Pingback: 人人網 CSS編碼規範 « 人人都是產品經理

  40. Pingback: 人人網 CSS編碼規範 « php樂享網_樂於分享,快樂無限!

  41. Pingback: 【絕對乾貨】之人人網 CSS編碼規範 « PM百科

  42. Pingback: 消失的CSS3 box-shadow 屬性? – 馬開東博客

  43. Pingback: 消失的CSS3 box-shadow 屬性? - IT牛人博客聚合

Leave a Reply

Your email address will not be published. Required fields are marked *