瀏覽器的兼容性

yeooo 發布于2019-08-29 11:25 / 1664人閱讀

摘要：瀏覽器的兼容性兼容有很多新增的標簽，在不支持的瀏覽器中不能正常顯示。事件處理中屬性，標準瀏覽器是作為參數帶入，而是方式獲得。

瀏覽器的兼容性 html5兼容

html5有很多新增的標簽，在不支持html5的瀏覽器中不能正常顯示。
解決方法：
使用html5的靜態資源；
加入腳本代碼，document.createElement創建新的標簽，并display:block;設置為塊類型

css兼容

1、png24位的圖片在ie6瀏覽器上出現背景，解決方案是做成png8

2、瀏覽器默認的margin和padding不同，解決方案是 * {margin:0;padding:0;}

3、IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大
    
    浮動ie產生的雙倍距離
    #box {
        float:left;
        width:10px;
        margin:0 0 0 10px;
    }
    這種情況下ie會產生20px的距離
    解決方案是在float的標簽樣式中加入_display:inline;(_這個符號只有ie6會識別)
    
4、IE兼容
    漸進識別的方式
    
    首先，"9"將IE9瀏覽器從所有情況下分離出來
    接著，"+"將IE8和IE7、IE6分離開來
    .box{
        background-color:#f1ee18;  //所有都可識別
        background-color:#00deff9;   //IE6、7、8
        +background-color:#a200ff;   //IE6、7
        _background-color:#1e0bd1;    //IE6
    }

5、IE條件注釋


6、IE6無法定義1px左右高度的容器，是因為默認的行高造成的,解決的方法也有很多,
例如: overflow:hidden zoom:0.08 line-height:1px 

7、使用margin：0 auto；方法使容器居中依然在IE6中行不通，我們要對其父容器使用text-align:center;

8、超鏈接訪問順序L-V-H-A a:lind,a:visited,a:hover.a:active

9、Chrome中文界面下默認會將小于12px的文本強制按照12px顯示
解決方案：-webkit-text-size-adjust:none;

10、在使用絕對定位/相對定位時，設置z-index在ie中可能會失效
是因為其元素依賴于其父元素的z-index，而父元素默認為0，所以子元素z-index高，而父元素低，依然不會改變其顯示順序；

javascript兼容

1、在標準的事件綁定中綁定事件的方法函數為 addEventListener,而IE使用的是attachEvent

2、標準瀏覽器采用事件捕獲的方式對應IE的事件冒泡機制（即標準由最外元素至最內元素或者IE由最內元素到最外元素）最后標準方亦覺得IE這方面的比較合理，所以便將事件冒泡納入了標準，這也是addEventListener第三個參數的由來，而且事件冒泡作為了默認值。

3、事件處理中event屬性，標準瀏覽器是作為參數帶入，而ie是window.event方式獲得。

4、獲得目標元素ie為e.srcElement 標準瀏覽器為e.target

5、IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性；
Firfox只能使用getAttribute()獲取自定義屬性；
解決方法：統一使用getAttribute()

6、IE下，event對象有x,y屬性，但是沒有pageX,pageY屬性；
   Firefox，event對象有pageX,pageY屬性，但是沒有x,y屬性。
   解決方法：條件注釋

云服務器 GPU云服務器兼容java的瀏覽器瀏覽器兼容性 webrtc瀏覽器兼容性 js兼容瀏覽器兼容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111633.html

如何機制地回答瀏覽器兼容性問題

摘要：前言有過面試經驗的同學應該都被問過瀏覽器兼容性的問題，對于面試官的問題，常常猝不及防，因為通常他們都是這么問的。來談談瀏覽器兼容的問題吧，你對瀏覽器的兼容性有了解過嗎，那么如何才是我們正確回答這個問題的姿勢呢。前言有過面試經驗的同學應該都被問過瀏覽器兼容性的問題，對于面試官的問題，常常猝不及防，因為通常他們都是這么問的。來談談瀏覽器兼容的問題吧，你對瀏覽器的兼容性有了解過嗎，那么如...

leanote 2019-08-22 18:31 評論0 收藏0
如何機制地回答瀏覽器兼容性問題

摘要：前言有過面試經驗的同學應該都被問過瀏覽器兼容性的問題，對于面試官的問題，常常猝不及防，因為通常他們都是這么問的。來談談瀏覽器兼容的問題吧，你對瀏覽器的兼容性有了解過嗎，那么如何才是我們正確回答這個問題的姿勢呢。前言有過面試經驗的同學應該都被問過瀏覽器兼容性的問題，對于面試官的問題，常常猝不及防，因為通常他們都是這么問的。來談談瀏覽器兼容的問題吧，你對瀏覽器的兼容性有了解過嗎，那么如...

Rindia 2019-08-30 15:54 評論0 收藏0
瀏覽器兼容性問題

摘要：一兼容性新標簽在低于的瀏覽器中的識別解決以下瀏覽器對新增標簽的不識別，并導致不起作用的問題。目前流行的庫有以及，它們都可以修正很多已知的瀏覽器之間的差異性。問題：經常遇到的瀏覽器的兼容性的情況、解決方法？思路：首先明確項目要兼容哪些瀏覽器的最低版本，然后考慮到CSS樣式和JavaScript在這些瀏覽器的兼容性。一、HTML 兼容性??1.H5新標簽在低于IE9的瀏覽器中的識別??...

G9YH 2019-08-29 16:35 評論0 收藏0
瀏覽器兼容性問題

摘要：一兼容性新標簽在低于的瀏覽器中的識別解決以下瀏覽器對新增標簽的不識別，并導致不起作用的問題。目前流行的庫有以及，它們都可以修正很多已知的瀏覽器之間的差異性。問題：經常遇到的瀏覽器的兼容性的情況、解決方法？思路：首先明確項目要兼容哪些瀏覽器的最低版本，然后考慮到CSS樣式和JavaScript在這些瀏覽器的兼容性。一、HTML 兼容性??1.H5新標簽在低于IE9的瀏覽器中的識別??...

megatron 2019-08-23 11:36 評論0 收藏0
瀏覽器兼容性問題

摘要：一兼容性新標簽在低于的瀏覽器中的識別解決以下瀏覽器對新增標簽的不識別，并導致不起作用的問題。目前流行的庫有以及，它們都可以修正很多已知的瀏覽器之間的差異性。問題：經常遇到的瀏覽器的兼容性的情況、解決方法？思路：首先明確項目要兼容哪些瀏覽器的最低版本，然后考慮到CSS樣式和JavaScript在這些瀏覽器的兼容性。一、HTML 兼容性??1.H5新標簽在低于IE9的瀏覽器中的識別??...

2501207950 2019-08-02 11:22 評論0 收藏0
前端兼容性探討

摘要：個人認為兼容性的問題也是對這三個方面進行處理。能力檢測需要注意兩點先檢測達成目的的最常用的特性，可以保證代碼最優化，并避免檢測多個條件必須測試實際要是用到的特性這些就是小可對兼容性的理解，有不對的希望各位朋友指正探討，嘻嘻這里和朋友們簡單探討一下個人對于前端兼容性的一些理解：在項目中，前端主要處理html，css,javaScript代碼，當然還有可能接觸到razor等渲染引擎方面...

MobService 2019-08-01 17:19 評論0 收藏0