IE8常見兼容問題及解決方法總結

        IE8及如下版本的瀏覽器對前端來講就是一個BUG的存在，可是總也繞不過去，非技術性官網通常會要求網站兼容到ie8,有時候甚至要到ie7，總之IE8是必定要能hold住。

最近公司一個比較小衆的項目，由於要經過控件去操做硬件設備的配置，用到object控件經過xml傳遞數據，因此只能在IE內核的瀏覽器上面運行。項目調試也是在ie瀏覽器上，這算是我和ie8的一次親密接觸吧。

        總結了一些遇到的比較常見狀況以及解決方法，不求全面，就當是筆記吧，以備之後查看。

1、對不兼容html5標籤和css3的一些屬性的狀況，能夠使用以下js插件

（1）html5shiv.js、html5media.js

（2）respond.js

（3）modernizr（一款兼容css三、html5等元素的插件）

2、css方面：

1、使用@media實現IE hack的方法

有些時候爲了實現IE下的某些效果會使用一些hack手段來實現目的。好比說使用「\0」，「\」和「\9」來僅讓IE某些版本識別，而對於現代瀏覽器來講，他會直接無視這些代碼。

@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){} IE10--IE11

@media screen and (min-width:0\0){} IE9--IE11

@media screen\9 {} IE7及如下

@media \0screen\,screen\9 {} IE8及如下

@media \0screen {} IE8

@media screen\0 {} IE8及以上

 

二、css3選擇器

3、支持box-sizing屬性

若是 IE 8 中元素寬度是 min-width 決定的，則瀏覽器直接忽略了 box-sizing: border-box。

四、不兼容calc():能夠用js去實現計算元素寬高

5、不兼容line-height

     line-height:32px;

     line-height: 32px\9; /*IE8*/

    *line-height: 32px; /* IE7支持 */

    _line-height: 32px; /* IE6支持 */

    -ms-line-height: 32px;/*IE9+支持*/

    -webkit-line-height:32px; /*chrome safair*/

    -moz-line-height: 32px;/*火狐*/

六、不兼容rgba()

background-color: rgba(0,0,0,.5);
background-color:#000;
filter:alpha(opacity=50);

7、不兼容border-radius

只能使用圖片代替了（總體背景圖或者四個弧角的背景圖）

8、不兼容text-overflow

首先平時用的時候要配合使用overflow: hidden; white-space: nowrap; 

這兩個屬性讓溢出隱藏和不換行,而後IE8用的時候記得不要加

word-berak:break-all; word-wrap:break-word; 

這樣斷開了,在IE8裏面是不會變成省略號的(可是在IE6/7/FF/Chrome都沒有問題),其實都單行省略了,原本也沒有必要斷詞

因此通常標準組合就是: 

overflow: hidden; 

white-space: nowrap; 

-o-text-overflow: ellipsis; /* for Opera */ 

text-overflow: ellipsis; /* for IE */ 

基本通殺全部瀏覽器了

最後像<a>這類默認非塊的元素,要加上display:block;纔有效果，還有別忘了width或者max-width。

9、不兼容background-size

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled：可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。 true：默認值。濾鏡激活。 false：濾鏡被禁止。

sizingMethod：可選項。字符串(String)。設置或檢索濾鏡做用的對象的圖片在對象容器邊界內的顯示方式。 crop：剪切圖片以適應對象尺寸。 image：默認值。增大或減少對象的尺寸邊界以適應圖片的尺寸。 scale：縮放圖片以適應對象的尺寸邊界。

src：必選項。字符串(String)。使用絕對或相對 url 地址指定背景圖像。假如忽略此參數，濾鏡將不會做用。

10、不兼容transform：使用filter的Matrix（矩陣）

11、iframe邊框經過css設定在FF下正常在ie下卻還存在邊框，設置 frameborder=no
border=0能夠去掉討厭的iframe邊框。
代碼以下：

<iframe src="url「 id="iframe" width="0" height="0" frameborder="no"
border="0"></iframe>

3、js及其餘方面

1、對象不支持「forEach」屬性或方法

 

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++;
    }
  };
}

 

2、對象不支持「trim」屬性或方法

e8及如下 String 沒有trim 方法

 

if ( !String.prototype.trim ) {
  String.prototype.trim = function () {
    return this.replace(/(^\s*)|(\s*$)/g, "");
  }
}

 

3、echarts

使用echarts第二版能兼容ie8，而第三版會提示更新瀏覽器。

四、視頻播放器

使用的是jplayer插件

5、不兼容placeholder

使用js插件：jquery.placeholder.js

https://github.com/mathiasbynens/jquery-placeholder

6、input回車提交表單

在登錄界面，輸入用戶名密碼後按回車鍵IE瀏覽器彈出消息框，「你查看的網頁正在試圖關閉窗口」

緣由：按回車鍵默認自動提交表單引發

 

解決方案：

<!-- enter不會自動提交數據 -->

<form action="www.baidu.com" method="post" onkeydown="if(event.keyCode==13){return false;}">

<input type="text" value="" />

<input type="text" value="" />

<button>提交</button>

<!-- 或在對應input上添加，同時建議取消自動填充，由於mac下會有問題<input type="text" value="" autocomplete="off" onkeydown="if(event.keyCode==13){return false;}" /> -->

</form>

7、從新加載緩存問題

在css文件更新後，刷新後IE瀏覽器沒有效果。緣由：IE瀏覽器會判斷刷新的url是否有參數，若是有參數，那麼參數是否有變化。若是沒有參數，或者參數沒有變化。那麼IE瀏覽器會自做聰明的將緩存的內容加載到頁面，而不進後臺獲取。

解決方案：

（1）在url末尾加上變化的無心義的參數（時間戳、隨機數等等）；

例如：url = "xxAction_method?time=" + new Date().getTime();

<link rel="stylesheet" href="./css/set.css?v=2018">

（2）在頁面中設置不啓用緩存,即cache屬性爲false。

jQuery.ajaxSetup({cache:false});

8、IE 不打開F12開發人員工具沒法執行js問題

在寫網頁的時候，使用ie作測試，都會開着開發者工具方便調試js。調試的時候都沒啥問題，控制檯顯示一切正常，可是關閉了開發者工具後，ie居然不執行js了。

緣由：部分IE版本是不支持console的，還有部分奇怪的IE版本好比IE8/IE9在開啓開發者工具時才支持console，我擦真是奇怪的設計。

解決方法：發版本時註釋掉全部console.log 或者在每次調用前測試下console是否可用

if(window.console)//測試是否可用

    console.log("login start");//可用的話，輸出信息

 

參考：https://blog.csdn.net/ganle/article/details/79742303