瀏覽器兼容問題

    給近兩天的工作一個總結,給這周劃上句號。

    工作中遇到了在google顯示的很好的界面,在IE顯示的不是很好,但還能看,僅僅是顏色和圖片和位置錯位,在360瀏覽器下看就是真的錯誤太大了,圖片不顯示,樣式也亂了,於是走上解決瀏覽器兼容之路。

     思路1:對應每個瀏覽器寫個css,判斷之,工作量太大,放棄。

     思路2:針對每個瀏覽器的不同之處在對應的地方寫個判斷即可,目測應該可以,只是一個一個找太麻煩,而且我對這個也不是很熟悉,對前端很熟悉的人應該寫的時候就會刻意的避免相應的兼容錯誤了。

    思路3:當用戶用某一個瀏覽器時候,不兼容就彈出窗口可以寫上,”您的瀏覽器內核不支持部分功能請切換至****“。我想過這種辦法,後來一想這屬於逃避問題的做法。

     思路:4:指定瀏覽器內核,360安全瀏覽器是雙內核的,IE和google內核,兼容模式下是ie內核,極速模式下是ie和google內核,可以指定google內核這樣打開360安全瀏覽器就直接進入極速模式了。360極速瀏覽器也是ie和google雙內核的,默認是google內核,在用網銀的時候自動跳轉ie內核,google內核網銀不支持。指定內核是爲了渲染網頁。

   具體操作就是通過meta信息,讓瀏覽器自動使用極速模式的google內核渲染網頁。

具體在<head> 與</head>  之間添加 <meta name="renderer" content="webkit">這樣就指定了使用google內核。也可以寫<meta name="renderer" content="webkit|ie-comp|ie-stand"> 這樣指定google內核,ie兼容內核,ie標準內核。

 對於<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">

IE=edge 告訴ie使用最新的引擎渲染網頁。chrome=1激活chrome frame chrome=1, 瞭解下:google chrome frame(谷歌內嵌瀏覽器框架GCF),這個插件讓用戶的IE瀏覽器外觀不變,但用戶在瀏覽網頁時,實際使用的是googlec chrome內核,且支持IE6,7,8,多個版本。

 

FF:支持!important,IE則忽略,用!important爲ff特別設置樣式。ff:firefox瀏覽器。

 

補充:css:linear分爲linear-gradient(線性漸變)和(radial-gradient(徑向漸變)。

 

html下注釋是<!--   -->

css下注釋的/*  */

js下注釋是/*  */

發佈了48 篇原創文章 · 獲贊 10 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章