給近兩天的工作一個總結,給這周劃上句號。
工作中遇到了在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下注釋是/* */