瀏覽器兼容問題總結

時間 2019-11-20

標籤瀏覽器兼容問題總結欄目瀏覽器简体版

原文原文鏈接

1、瀏覽器兼容性

瀏覽器的兼容性問題，每每是個別瀏覽器（沒錯，就是那個不同凡響的瀏覽器）對於一些標準的定義不一致致使的。俗話說：沒有IE就沒有傷害。javascript

2、進行瀏覽器兼容性以前分析

1.根據用戶羣體使用的瀏覽器版本，是採用優雅降級，仍是漸進加強。css

優雅降級：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack 使其能夠在低版本瀏覽器上正常瀏覽。html

漸進加強：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，而後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。前端

2.分析市場上主要瀏覽器的市場份額，決定是否有必要進行兼容html5

可訪問瀏覽器市場份額網站：statcounter,查看當前瀏覽器對特定CSS3和HTML5特性的支持成都：caniusejava

3、瀏覽器兼容處理

瀏覽器的兼容性主要是樣式兼容性（css），交互兼容性（javascript），瀏覽器 hack 三個方面。web

1.樣式兼容性（css）方面

不一樣的瀏覽器樣式存在差別，能夠經過 Normalize.css 抹平差別，也能夠定製本身的 reset.css，重置瀏覽器的默認樣式
在還原設計稿的時候咱們經常會須要用到透明屬性，因此解決 IE9 如下瀏覽器不能使用 opacit。
```
opacity: 0.5;
 filter: alpha(opacity = 50); //IE6-IE8咱們習慣使用filter濾鏡屬性來進行實現
```

瀏覽器廠商提供了針對瀏覽器的前綴，部分的屬性須要加上瀏覽器前綴

內核	主要表明瀏覽器	前綴
Trident	IE瀏覽器	-ms
Gecko	Firefox	-moz
Presto	Opera	-o
Webkit	Chrome和Safari	-webkit

Modernizr.js既能給老版本瀏覽器打補丁，又能保證新瀏覽器漸進加強的用戶體驗。它是幫助咱們提升開發實踐的，使用一個很是時髦的方法來幫助探測瀏覽器是否支持某種新特性，甚至能夠加載額外的script腳本。

2.交互兼容性（javascript）

事件兼容的問題

var eventshiv = {
    // event兼容
    getEvent: function(event) {
        return event ? event : window.event;
    },

    // type兼容
    getType: function(event) {
        return event.type;
    },

    // target兼容
    getTarget: function(event) {
        return event.target ? event.target : event.srcelem;
    },

    // 添加事件句柄
    addHandler: function(elem, type, listener) {
        if (elem.addEventListener) {
            elem.addEventListener(type, listener, false);
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, listener);
        } else {
            // 在這裏因爲.與'on'字符串不能連接，只能用 []
            elem['on' + type] = listener;
        }
    },

    // 移除事件句柄
    removeHandler: function(elem, type, listener) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, listener, false);
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, listener);
        } else {
            elem['on' + type] = null;
        }
    },

    // 添加事件代理
    addAgent: function (elem, type, agent, listener) {
        elem.addEventListener(type, function (e) {
            if (e.target.matches(agent)) {
                listener.call(e.target, e); // this 指向 e.target
            }
        });
    },

    // 取消默認行爲
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    // 阻止事件冒泡
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

3.瀏覽器 hack

IE 條件註釋

IE 的條件註釋僅僅針對IE瀏覽器，對其餘瀏覽器無效segmentfault

操做符	含義
lt	小於
gt	大於
lte	小於等於
gte	大於等於
!	不等於

html5shiv.js：解決 ie9 如下瀏覽器對 html5 新增標籤不識別的問題。
respond.js：解決 ie9 如下瀏覽器不支持 CSS3 Media Query 的問題
picturefill.js：解決 ie9 如下瀏覽器不支持 CSS3 Media Query 的問題瀏覽器

<!--[if lt IE 9]>
  <script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>
<![endif]-->