摘要:在各大瀏覽器廠商的發展過程中,它們對的標準各有不同的實現,標準不同存在差異所以產生兼容性的問題。它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或聲明的方法。但是及更低版本瀏覽器會繼續解析。
為什么會存在瀏覽器兼容問題?
首先要了解兼容,我們先得了解一下為什么會存在瀏覽器兼容問題。在各大瀏覽器廠商的發展過程中,它們對web的標準各有不同的實現,標準不同存在差異所以產生兼容性的問題。瀏覽器內核
五大瀏覽器內核以及各內核代表作品:
Trident: IE、Maxthon(遨游)、Theworld(世界之窗)
Gecko: Mozilla Firefox
Webkit: Safari、Chrome
Presto: Opera
Blink: 由Google和Opera Softwase開發的瀏覽器排版引擎
一些概念
CSS BUG
Css樣式在各瀏覽器中解析不一致的情況,或者說Css樣式在瀏覽器中不能正確顯示的問題稱為CSS Bug
CSS hack
CSS中,hack是指一種兼容css在不同瀏覽器中正確顯示的技巧方法,因為他們都屬于個人對css代碼的非官方的修改,或非官方的補丁。有些人更喜歡使用patch(補丁)來描述這種行為。
Filter
它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或聲明的方法。本質上講,filter是一種用來過濾不同瀏覽器的hack類型。過濾器(filter)
ps:過濾器可能這個說法有點不太正確,也可以說是瀏覽器標識符!
_下劃線過濾器
當一個屬性前面增加一個下劃線后,由于符合標準的瀏覽器不能識別帶有下劃線的屬性而忽略了這個聲明。但是ie6及更低版本瀏覽器會繼續解析。
語法:選擇器{_屬性:屬性值;}
此方法是區分ie6瀏覽器和其他瀏覽器的方法
!important關鍵字過濾器
它表示所附加的聲明具有最高優先級的意思,被瀏覽器優先顯示(ie6不識別此寫法)
語法:選擇符{屬性:屬性值!important;}
*屬性過濾器
當一個屬性前面加了*后,該屬性能被ie7及以下瀏覽器識別,其他瀏覽器忽略該屬性的作用
語法:選擇器{*屬性:屬性值;}
+屬性過濾器
當一個屬性前面加了+后,該屬性能被ie7及以下瀏覽器識別,其他瀏覽器忽略該屬性的作用
語法:選擇器{+屬性:屬性值;}
*+屬性過濾器
當一個屬性前面加了*+后,該屬性能被ie7瀏覽器識別,其他瀏覽器忽略該屬性的作用
語法:選擇器{*+屬性:屬性值;}
9
ie版本識別,其他瀏覽器不識別
語法:選擇符{屬性:屬性值9;}
ie8及以上瀏覽器識別,其他瀏覽器不識別
語法:選擇符{屬性:屬性值0;}
-moz-
Firefox瀏覽器識別,其他瀏覽器不識別
-webkit-
webkit內核瀏覽器識別,其他瀏覽器不識別
-o-
Opera瀏覽器識別,其他瀏覽器不識別
-ms-
ie瀏覽器識別,其他瀏覽器不識別常見的瀏覽器兼容問題以及解決方法
1)、圖片有邊框bug
描素:當圖片加在ie上會出現邊框
hack:給圖片加border:0;或者border:0 none;
2)圖片間隙
描素:div中的圖片間隙bug
在div中插入圖片時圖片將div下方撐大大約三像素
hack1:將
(1)訪問frame對象:
IE:使用window.frameId或者window.frameName來訪問這個frame對象, frameId和frameName可以同名。
Firefox:只能使用window.frameName來訪問這個frame對象.
另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")來訪問這個frame對象.
(2)切換frame內容:
在 IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"來切換frame的內容.
如果需要將frame中的參數傳回父窗口(注意不是opener,而是parent frame),可以在frame中使用parent來訪問父窗口。例如:parent.document.form1.filename.value="Aqing";
15)模態和非模態窗口問題
說明:IE下,可以通過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能.
解決方法:直接使用window.open(pageURL,name,parameters)方式打開新窗口。
如果需要將子窗口中的參數傳遞回父窗口,可以在子窗口中使用window.opener來訪問父窗口.
例如:
var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";小廣告
我自己運營的公眾號,記錄我自己的成長!
公眾號:前端曰
公眾號ID:js-say
ps:是(yue)不是(ri)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114585.html
摘要:所以這種情況下是不符合點擊事件的定義的。,關于移動端的點擊事件總結完了,可能你都沒想到一個簡單的點擊事件會有那么多坑,如果你在工作中可能會涉及到移動端開發的話,相信這篇文章還是值得你點贊和收藏的,畢竟是踩了那么多坑的經驗總結。 看標題的時候你可能會想,點擊事件有什么好說的,還寫一篇攻略?哈哈,如果你這么想,只能說明你too young to simple. 接觸過移動端開發的同學可能都...
摘要:所以這種情況下是不符合點擊事件的定義的。,關于移動端的點擊事件總結完了,可能你都沒想到一個簡單的點擊事件會有那么多坑,如果你在工作中可能會涉及到移動端開發的話,相信這篇文章還是值得你點贊和收藏的,畢竟是踩了那么多坑的經驗總結。 看標題的時候你可能會想,點擊事件有什么好說的,還寫一篇攻略?哈哈,如果你這么想,只能說明你too young to simple. 接觸過移動端開發的同學可能都...
摘要:所以這種情況下是不符合點擊事件的定義的。,關于移動端的點擊事件總結完了,可能你都沒想到一個簡單的點擊事件會有那么多坑,如果你在工作中可能會涉及到移動端開發的話,相信這篇文章還是值得你點贊和收藏的,畢竟是踩了那么多坑的經驗總結。 看標題的時候你可能會想,點擊事件有什么好說的,還寫一篇攻略?哈哈,如果你這么想,只能說明你too young to simple. 接觸過移動端開發的同學可能都...
摘要:有時候一個簡單的出現,往往是由于一點知識小細節但往往這點小細節看似簡單,其背后卻頗有韻味。如果這篇文章對你有所收獲,請留在你的小心心其他推薦你知多少常用操作 有時候一個簡單Bug的出現,往往是由于一點知識小細節;但往往這點小細節看似簡單,其背后卻頗有韻味。 (需求)這部分UI給換成這樣的 showImg(https://segmentfault.com/img/bVbjgWw?w=64...
閱讀 1648·2019-08-30 15:55
閱讀 972·2019-08-30 15:44
閱讀 866·2019-08-30 10:48
閱讀 2024·2019-08-29 13:42
閱讀 3179·2019-08-29 11:16
閱讀 1234·2019-08-29 11:09
閱讀 2053·2019-08-26 11:46
閱讀 611·2019-08-26 11:44