摘要:一兼容性新標簽在低于的瀏覽器中的識別解決以下瀏覽器對新增標簽的不識別,并導致不起作用的問題。目前流行的庫有以及,它們都可以修正很多已知的瀏覽器之間的差異性。
問題:經常遇到的瀏覽器的兼容性的情況、解決方法?
思路:首先明確項目要兼容哪些瀏覽器的最低版本,然后考慮到CSS樣式和JavaScript在這些瀏覽器的兼容性。
一、HTML 兼容性
??1.H5新標簽在低于IE9的瀏覽器中的識別
??html5shiv.min.js:解決ie9以下瀏覽器對html5新增標簽的不識別,并導致CSS不起作用的問題。
??respond.min.js: 讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
??
??引入respond.min.js,但要在css的后面(越早引入越好,在ie下面看到頁面閃屏的概率就越低,因為最初css會先渲染出來,如果respond.js加載得很后面,這時重新根據media query解析出來的css會再改變一次頁面的布局等,所以看起來有閃屏的現象)。
??2.不同瀏覽器的標簽默認的內/外補丁不同
??雖然這些年來隨著瀏覽器的迅速發展與規范的統一,瀏覽器特性碎片化的情況有所改善,但是在不同的瀏覽器之間仍然存在著很多的行為差異。而解決這種問題的最好的辦法就是使用某個CSS Reset來為所有的元素設置統一的樣式,保證你能在相對統一干凈的樣式表的基礎上開始工作。目前流行的Reset庫有 normalize.css, minireset 以及 ress ,它們都可以修正很多已知的瀏覽器之間的差異性。而如果你不打算用某個外在的庫,那么可以使用如下的基本規則:
*{
??margin: 0;
??padding: 0;
??box-sizing: border-box;
}
??*號這樣一個通用符在編寫代碼的時候是快,但如果網站很大,CSS樣式表文件很大,這樣寫的話,他會把所有的標簽都初始化一遍,這樣就大大的加強了網站運行的負載,會使網站加載的時候需要很長一段時間。
二、CSS 兼容性
??1.IE的條件注釋hack:
??
??
??2.IE 屬性過濾器(較為常用的hack方法)
??針對不同的 IE 瀏覽器,可以使用不同的字符來對特定的版本的 IE 瀏覽器進行樣式控制。
??3.瀏覽器 CSS 兼容前綴
??使用特定的瀏覽器前綴是CSS開發中常見的工作之一,不同的瀏覽器、不同的屬性對于前綴的要求也不一樣,這就使得我們無法在編碼過程中記住所有的前綴規則。并且在寫樣式代碼的時候還需要加上特定的瀏覽器前綴支持也是個麻煩活,幸虧現在也是有很多工具可以輔助我們進行這樣的開發:
Online tools: Autoprefixer
Text editor plugins: Sublime Text, Atom
Libraries: Autoprefixer (PostCSS)
??4.a 標簽的幾種 CSS 狀態的順序
??很多人在寫 a 標簽的樣式,會疑惑為什么寫的樣式沒有效果,或者點擊超鏈接后,hover、active 樣式沒有效果,其實只是寫的樣式被覆蓋了。
??正確順序:L-V-H-A : a:link, a:visited, a:hover, a:active {}
?? ":link": a標簽還未被訪問的狀態;
?? ":visited": a標簽已被訪問過的狀態;
?? ":hover": 鼠標懸停在a標簽上的狀態;
?? ":active": a標簽被鼠標按著時的狀態;
??5.IE6 雙倍邊距的問題
??在 ie6 中設置浮動,同時又設置 margin,會出現雙倍邊距的問題
??解決方法:display: inline;
??6.透明度的兼容CSS設置
??IE用 filter:alpha(opacity=60),而其他主流瀏覽器用 opacity:0.6;
??三、JavaScript的兼容性 | ||
---|---|---|
兼容性對象 | 一般瀏覽器 | IE |
綁定和刪除事件處理程序 | addEventListener removeEventListener | attachEvent detachEvent |
獲取事件的目標 | event.target | event.srcElement |
阻止事件默認行為 | event.returnValue | event.preventDefault |
停止事件冒泡 | stopPropagation | cancelBubble |
創建XHR對象 | XMLHttpRequest構造函數 | activeXObject |
參考文章:
bootstrap的其他CDN地址
respondjs實現思路
20個編寫現代CSS代碼的建議
瀏覽器兼容性問題解決方案 · 總結
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113839.html
摘要:對瀏覽器兼容問題,一般分,,兼容,兼容。特別是增加了許多新標簽,低版本瀏覽器會存在不兼容的情況。出現這個問題的原因是之前的瀏覽器都會給標簽一個最小默認的行高的高度。 **我所說的兼容性問題,主要是說IE與幾個主流瀏覽器如firefox,google等。而對IE瀏覽器來說,IE7又是個跨度,因為之前的版本更新甚慢,bug甚多。從IE8開始,IE瀏覽器漸漸遵循標準,到IE9后由于大家都一致...
摘要:瀏覽器兼容問題四行內屬性標簽,設置后采用布局,又有橫行的的情況,間距問題癥狀里的間距比超過設置的間距碰到幾率解決方案在后面加入備注行內屬性標簽,為了設置寬高,我們需要設置除了標簽比較特殊。 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補丁和內補丁不同問題癥狀:隨便寫幾個標簽,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率:100%解決方案:CSS里 *...
摘要:瀏覽器兼容問題四行內屬性標簽,設置后采用布局,又有橫行的的情況,間距問題癥狀里的間距比超過設置的間距碰到幾率解決方案在后面加入備注行內屬性標簽,為了設置寬高,我們需要設置除了標簽比較特殊。 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補丁和內補丁不同問題癥狀:隨便寫幾個標簽,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率:100%解決方案:CSS里 *...
摘要:瀏覽器兼容問題四行內屬性標簽,設置后采用布局,又有橫行的的情況,間距問題癥狀里的間距比超過設置的間距碰到幾率解決方案在后面加入備注行內屬性標簽,為了設置寬高,我們需要設置除了標簽比較特殊。 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補丁和內補丁不同問題癥狀:隨便寫幾個標簽,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率:100%解決方案:CSS里 *...
摘要:個人認為兼容性的問題也是對這三個方面進行處理。能力檢測需要注意兩點先檢測達成目的的最常用的特性,可以保證代碼最優化,并避免檢測多個條件必須測試實際要是用到的特性這些就是小可對兼容性的理解,有不對的希望各位朋友指正探討,嘻嘻 這里和朋友們簡單探討一下個人對于前端兼容性的一些理解: 在項目中,前端主要處理html,css,javaScript代碼,當然還有可能接觸到razor等渲染引擎方面...
閱讀 1875·2021-09-27 13:35
閱讀 3429·2019-08-30 14:16
閱讀 2483·2019-08-30 10:52
閱讀 859·2019-08-29 16:35
閱讀 1416·2019-08-29 15:22
閱讀 3641·2019-08-23 18:21
閱讀 3131·2019-08-23 18:00
閱讀 3123·2019-08-23 16:50