IE8的兼容問題

　　

須要使用meta標籤來強制IE8使用最新的內核渲染頁面，代碼以下：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

IE=edge表示強制使用IE最新內核，chrome=1表示若是安裝了針對IE6/7/8等版本的瀏覽器插件Google Chrome Frame（可讓用戶的瀏覽器外觀依然是IE的菜單和界面，但用戶在瀏覽網頁時，實際上使用的是Chrome瀏覽器內核），那麼就用Chrome內核來渲染。

解決方法360已經告訴咱們了，經過meta標籤的方式建議其使用Webkit，代碼以下：

<meta name="renderer" content="webkit"> 

我沒有作細緻的調查，不知道其餘的雙核瀏覽器是否支持此特性。

Media Query

IE8彷佛沒法識別Media Query，因此須要hack一下啦！推薦採用Respond.js解決此問題，具體方法參見它的文檔便可。

實現CSS3的某些特性

IE8不支持CSS3的不少新特性，不過咱們可使用一些比較成熟的hack方法，我採用的是CSS3 PIE，它支持的特性有這些：border-radius、box-shadow、border-image、multiple background images、linear-gradient等。

特別注意：請必定閱讀CSS PIE給出的Know Issues。

識別HTML5元素

若是你在前端代碼中使用了HTML5的新標籤（nav/footer等），那麼在IE中這些標籤可能沒法正常顯示。我使用html5shiv，具體使用方法見文檔。

關於max-width

還有一個在IE8中常常遇到的問題就是max-width，網頁中圖片的尺寸可能比較寬，我會給它設置max-width: 100%來限制其寬度最大爲父容器的寬度，可是有時候卻不奏效，慢慢摸索才得知IE解析max-width所遵循的規則：嚴格要求直接父元素的寬度是固定的。經實驗發現Chrome所遵照的規則比IE鬆一些，因此這個問題應該不歸屬爲IE兼容性問題，不過我仍是提一下吧。分享兩個我遇到的場景：

（1）td中的max-width

若是針對td中的img元素設置max-width: 100%，在IE和Firefox你會發現不奏效，而在Chrome中倒是能夠的。經查詢發現須要給table設置table-layout: fixed，對此屬性的具體解釋見W3School。

（2）嵌套標籤中的max-width

以下的HTML結構：

<div class="work-item"> <a href="#" class="work-link"> <img src="sample.jpg" class="work-image img-responsive"> </a> </div> 

最外層元素.work-item設置了固定寬度，可是對img設置max-width爲100%卻無效，後來才發現須要再對a標籤設置width: 100%，這樣才能使最內層的img標籤充滿整個div。

嵌套inline-block下padding元素重疊

HTML代碼：

<ul>
    <li><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li> </ul> 

CSS代碼：

ul li{ display: inline-block; } ul li a{ display: inline-block; padding: 10px 15px; } 

按理來講a標籤之間的距離應該是30px，但在IE8中出現了重疊，只有15px。這裏和這裏也提到了一樣的問題。個人解決方法是使用float: left替代display: inline-block實現水平佈局。

placeholder

IE8下不支持HTML5屬性placeholder，不過爲解決此問題的js插件挺多的，好比：jquery-placeholder。

last-child

first-child是CSS2的內容，可是last-child就不是了，因此IE8不買帳。推薦的作法不是使用last-child，而是給最後一個元素設置一個.last的class，而後對此進行樣式設置，這樣就所有兼容了。

background-size: cover

若是你想使用background-size: cover設置全屏背景，很遺憾IE8辦不到...但可使用IE獨有的AlphaImageLoader濾鏡來實現，添加一條以下的CSS樣式：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

將sizingMethod設置爲scale就OK了。

還沒完，若是你在此背景之上放置了連接，那這個連接是沒法點擊的。通常狀況下的解決辦法是爲連接或按鈕添加position:relative使其相對浮動。

filter blur

CSS3中提供支持濾鏡效果的屬性filter，好比支持高斯模糊效果的blur（相似iOS7的效果）：

filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); 

IE8對filter: blur(10px)的顯示效果是對HTML元素進行小範圍的模糊處理，這個效果並非高斯模糊，要想支持高斯模糊，須要以下設置：

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10'); 

在實踐中發現一個坑就是，全部position: relative的元素都不會生效。

其餘的發現是，IE9對filter: blur(10px)無效，而對filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');是針對元素小範圍的模糊效果。

. 動態腳本

 在ie8中，動態修改script的src屬性會報錯，解決辦法：調用jquery的getScript()方法，以下：

$.getScript(yourScriptUrl)

CSS文件大小限制

 項目發佈到線上時，一般會對css文件進行打包壓縮，以節省空間。一般過程當中，項目開發過程當中會引入一些樣式庫文件。庫文件一塊兒打包，生成的合併文件就會變大。在chrome、FF、IE9以上沒有問題，可是在ie8中，樣式不顯示。調試過程當中，開始以爲很詭異，忽然一個想法懷疑是ie8對css文件大小有限制，通過查資料，獲得以下結論：

• Up to 31 CSS files or tags per page. 單個頁面最多31個css文件
• Up to 288K per CSS file (uncompressed). 每一個css文件大小最大288k
• Up to 4095 selectors per CSS file. 每一個css文件最多4095個選擇器

    確實是ie8對css文件的字節數有限制。解決辦法：css、less等庫文件打包時，能夠打包成2至3個文件。

window.location.orign

    ie8不支持window.location.orign方法，取值爲undefined。解決方法：經過協議、主機、端口拼，重寫改屬性

if (!window.location.origin) { window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : ''); } window.location.href = window.location.origin;

 ajax請求緩存

     在ie8瀏覽器中，對於同一接口屢次請求，會從瀏覽器的緩存中獲取，解決方法：添加時間戳

url: 'yourAjaxUrl?time=' + new Date().getTime()

 console問題

     
通常這個問題的現象是：當你開發控制檯時不報錯，關閉控制檯運行代碼時報錯。window.console()在ie8中必須打開控制檯才能實現，關閉控制檯時會報錯，在ie9纔開始修復該問題。解決這個兼容性問題，有兩種方案： 
- 去除頁面中的console.log()方法 （我是用這種方法處理的，頁面中殘留的console.log()很少） 
- 重寫window.console()方法；

(function () { var funcs = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn']; for(var i=0,l=funcs.length;i<l;i++) { var func = funcs[i]; if(!console[func]) console[func] = function(){}; } })()

Array.forEach()兼容

     
forEach在ie8中不兼容，重寫該方法：

 if ( !Array.prototype.forEach ) {
        Array.prototype.forEach = function forEach( callback, thisArg ) {
            var T, k;
            if ( this == null ) {
                throw new TypeError( "this is null or not defined" );
            }
            var O = Object(this);
            var len = O.length >>> 0;
            if ( typeof callback !== "function" ) {
                throw new TypeError( callback + " is not a function" );
            }
            if ( arguments.length > 1 ) {
                T = thisArg;
            }
            k = 0;
            while( k < len ) {

                var kValue;
                if ( k in O ) {
                    kValue = O[ k ];
                    callback.call( T, kValue, k, O );
                }
                k++;
            }
        };
    }

 oninput與onpropertychange

     
有時候須要兼容input輸入框的值動態的變化，固然onKeyup也是一種方法，可是對於用鼠標複製等沒法監聽，onchange須要值有變化時纔出發。因此oninput方法比較合適，可是在ie8如下未被兼容，能夠經過onpropertychange處理，代碼以下：

Ev.on(ele,"input propertychange",function(e){ // do something });

String.trim()兼容

     
ie8下不兼容String.trim()方法，判斷String做用域鏈上是否存在trim方法，如不存在，就自定義改方法

// string trim 方法兼容 if (!String.prototype.trim) { String.prototype.trim = function trim() { return this.replace(/^\s+|\s+$/g, ''); } }