IE瀏覽器兼容問題總結

時間  2019-11-21
標籤 瀏覽器 兼容 問題 總結 欄目 瀏覽器 简体版
原文   原文鏈接

一 標準盒模型和怪異盒模型

div{
width: 200px;
height: 200px;
padding: 10px;
border: 5px solid #000;
margin:20px;
}
複製代碼

瀏覽器的盒子模型分爲兩類javascript

  • 標準的w3c盒子模型css

    chrome,firefox,IE9,IE10,IE11的盒模型爲標準盒模型html

    實際的寬/高 = width/height + 2padding + 2border;html5

  • IE6-8盒子模型java

    width/height就是該盒子的大小，是包含內邊距padding和邊框border寬度在內的(這種狀況發生在html文檔中沒有文檔聲明的狀況下);css3

可使用doctype聲明<!doctype html>，讓瀏覽器使用標準模式。web

box-sizing屬性（css3）chrome

box-sizing:content-box，採用標準模式解析計算，默認模式；express

box-sizing:border-box，採用怪異模式解析計算；瀏覽器

二 IE9 如下瀏覽器不能使用 opacity

opacity: 0.5;
 filter: alpha(opacity = 50); //IE6-IE8咱們習慣使用filter濾鏡屬性來進行實現
 filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支持濾鏡寫法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)
複製代碼

三 new Date('2019-4-18') IE不兼容

val= '2019-4-18' 想要獲取下一天的日期 也要返回該格式

var dd = new Date(val);
dd.setDate(dd.getDate()+1);//獲取AddDayCount天后的日期
let Y = dd.getFullYear() + '-';
let M = (dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1) + '-';
let D = (dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()) + ' ';
return (Y + M + D + '00:00:00');
複製代碼

IE中會報NAN的錯誤 由於IE沒法識別new Date('2019-4-18')

  • 解決方法一：new Date('2019/4/18')
  • 解決方法二： val 轉換爲 Thu Apr 18 2019 15:33:55 GMT+0800 (中國標準時間) 原始格式
val.setMinutes(val.getMinutes() - val.getTimezoneOffset() + 24 * 60); //獲取明天 須要多加24小時*60分鐘
return val.toJSON().slice(0, 10) + ' 00:00:00'
複製代碼

四 IE事件綁定

W3C方式

element.addEventListener('click', function(e){ // ... }, false);

W3C綁定的優勢

  • 1.該方法同時支持事件處理的捕獲和冒泡階段。事件階段取決於addEventListener最後的參數設置：false (冒泡) 或 true (捕獲)。
  • 2.在事件處理函數內部，this關鍵字引用當前元素。
  • 3.事件對象老是能夠經過處理函數的第一個參數(e)捕獲。
  • 4.能夠爲同一個元素綁定你所但願的多個事件，同時並不會覆蓋先前綁定的事件

W3C綁定的缺點

  • 1.IE不支持，你必須使用IE的attachEvent函數替代。

IE方式

element.attachEvent('onclick', function(){ // ... });

IE方式的優勢

  • 1.能夠爲同一個元素綁定你所但願的多個事件，同時並不會覆蓋先前綁定的事件。

IE方式的缺點

  • 1.IE僅支持事件捕獲的冒泡階段;
  • 2.事件監聽函數內的this關鍵字指向了window對象，而不是當前元素（IE的一個巨大缺點）;
  • 3.事件對象僅存在與window.event參數中;
  • 4.事件必須以ontype的形式命名，好比，onclick而非click;
  • 5.僅IE可用。你必須在非IE瀏覽器中使用W3C的addEventListener.

兼容寫法

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;
        }
    }
};
複製代碼

五 樣式兼容IE

1.不一樣瀏覽器的默認樣式存在差別

<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
複製代碼

簡單粗暴法

* { margin: 0; padding: 0; }
複製代碼

2. 解決 ie9 如下瀏覽器對 html5 新增標籤不識別的問題

<!--[if lt IE 9]> <script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
複製代碼

3. 解決 ie9 如下瀏覽器不支持 CSS3 Media Query 的問題

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
複製代碼

4.解決 IE 9 10 11 等瀏覽器不支持 標籤的問題

<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js"></script>
複製代碼

5. IE6 雙倍邊距的問題

在ie6 中設置浮動，同時又設置 margin，會出現雙倍邊距的問題

display: inline;
複製代碼

6.解決 IE6 不支持 fixed 絕對定位以及IE6下被絕對定位的元素在滾動的時候會閃動的問題

/* IE6 hack */
*html, *html body {
  background-image: url(about:blank);
  background-attachment: fixed;
}
*html #menu {
  position: absolute;
  top: expression(((e=document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + 'px');
}
複製代碼

7. 解決 IE6 不支持 min-height 屬性的問題

min-height: 350px;
_height: 350px;
複製代碼

8. 讓 IE7 IE8 支持 CSS3 background-size屬性

因爲 background-size 是 CSS3 新增的屬性，因此 IE 低版本天然就不支持了，可是老外寫了一個 htc 文件，名叫 background-size polyfill，使用該文件可以讓 IE七、IE8 支持 background-size 屬性。其原理是建立一個 img 元素插入到容器中，並從新計算寬度、高度、left、top 等值，模擬 background-size 的效果。

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-image: url('img/37.png');
  background-repeat: no-repeat;
  background-size: cover;
  -ms-behavior: url('css/backgroundsize.min.htc');
  behavior: url('css/backgroundsize.min.htc');
}
複製代碼

9.IE6-7 line-height 失效的問題

問題：在ie 中 img 與文字放一塊兒時，line-height 不起做用

解決：都設置成 float

10. ie6/7/8 鼠標顯示小手指

cursor:hand
複製代碼

其餘瀏覽器

cursor: pointer;
複製代碼

六 瀏覽器 CSS 兼容前綴

-o-transform:rotate(7deg); // Opera

-ms-transform:rotate(7deg); // IE

-moz-transform:rotate(7deg); // Firefox

-webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 統一標識語句
複製代碼

七 鍵盤事件 keyCode 兼容性寫法

var inp = document.getElementById('inp')
var result = document.getElementById('result')

function getKeyCode(e) {
  e = e ? e : (window.event ? window.event : "")
  return e.keyCode ? e.keyCode : e.which
}

inp.onkeypress = function(e) {
  result.innerHTML = getKeyCode(e)
}
複製代碼

八 窗口大小的兼容寫法

// 瀏覽器窗口可視區域大小（不包括工具欄和滾動條等邊線）
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 網頁內容實際寬高（包括工具欄和滾動條等邊線）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 網頁內容實際寬高 (不包括工具欄和滾動條等邊線）
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滾動的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程