相容低版本IE瀏覽器的一些心得體會（持續更新）

ElemSN發表於2020-08-27
瀏覽器

前言：

近期工作中，突然被要求改別人的程式碼，其中有一項就是相容IE低版本瀏覽器，所以優雅降級吧。

我相信相容低版本IE是許多前端開發的噩夢，尤其是改別人寫的程式碼，更是痛不欲生。

本文將介紹一些本人相容時的一些心得體會，以及踩到的一些坑。

彙總：

1.IE瀏覽器不相容webp格式：

專案中有些圖片是用webp格式儲存的，IE瀏覽器完全不相容。

我們要用各種影像處理軟體改成jpg或者png格式的。

2.IE瀏覽器對Flex不友好：

如下圖，IE10以下版本對flex不相容。因專案中大量用了flex佈局，導致一切換到IE9，介面佈局立馬亂套。

 

 

 我是利用html的hack，引入了一個新的css檔案，挨個給float吧。（注意清除浮動操作，別讓特定的元素丟失高度）

 <!--[if lte IE 11]>
     <link rel="stylesheet" href="{$WEB_URL}/Public/common/css/ie/ieUtil.css">
 <![endif]-->

3.IE9及以下對swiper外掛相容性問題：

在專案中，輪播圖的板塊還是比較多的，IE9以下，需要將swiper外掛降級到2.x及以下。

所以程式碼就有了這樣的塊：

<!--[if !IE 9]><!-->
      <link rel="stylesheet" href="{$WEB_URL}/Public/common/static/swiper/css/swiper.min.css">
    <script src="{$WEB_URL}/Public/common/static/swiper/js/swiper.min.js"></script>
    <!--<![endif]-->

    <!--[if IE 9]>
        <link rel="{$WEB_URL}/Public/common/static/swiper/css/idangerous.swiper2.7.6.css">
        <script src="{$WEB_URL}/Public/common/static/swiper/js/idangerous.swiper2.7.6.js"></script>   
    <![endif]-->

說明：swiper.min.css/js，是高版本swiper；而idanger.swiper2.7.6.css/js，是swiper2的檔案。

注意：這並沒有寫錯，雖然不是標準的hack格式，但只有這麼寫才能不讓內部的程式碼被瀏覽器放到頁面上。

js中需要初始化輪播圖並配置，這裡放一段IE版本適配的程式碼：

if((/msie [6|7|8|9]/i.test(navigator.userAgent))){  //如果是IE6、7、8、9則執行下邊的
    var liveSwiper = new Swiper('.section_center .swiper-container', {
        loop: true, //設定為true，則開啟loop（環路）模式，預設為false
        speed: 3000, //滑動速度
        autoplay: 3000, //自動切換的時間間隔（單位ms），不設定該引數slide不會自動切換。
        autoplayDisableOnInteraction: false, //使用者操作swiper之後，是否禁止autoplay，預設為true：停止。
        watchActiveIndex:true,
        pagination : '.swiper-pagination',
        paginationClickable :true,
        onSlideChangeEnd: function(){
          var text = $(".section_center .swiper-slide").eq(this.liveSwiper.activeIndex).children().eq(0).children().eq(1).html();
          $(".bannertitle").text(text);
          
        },
    })
}else{
    var liveSwiper = new Swiper('.section_center .swiper-container', {
      slidesPerView: 1,
      spaceBetween: 10,
      loop: true,
      autoplay: true,//可選選項，自動滑動
      pagination: '.swiper-pagination',
      paginationClickable: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.section_center .swiper-button-next',
        prevEl: '.section_center .swiper-button-prev',
      },
      on: {
        slideChangeTransitionEnd: function(){
          var text = $(".section_center .swiper-slide").eq(this.realIndex + 1).find("p").text();
          $(".bannertitle").text(text);
        },
      },
    })
}

版本不同，在寫法上也有一定的區別，具體可以參照2.x官網 https://2.swiper.com.cn/。

4.IE9以下不要用ES6了：

隨著ECMAScript標準的升級，各種語法糖深得我們喜愛，但如果要相容低版本，就別用了吧。

切換到IE9以下，控制檯中就各種報錯，像let，const、模板字串這些屬於ES6範疇的，都改成ES5標準的吧。

5.IE9及以下不支援placeholder屬性：

在專案中，當然有與使用者互動的模組，所以輸入框是一定有的。

但IE9及以下不相容input標籤的placeholder屬性，這樣沒有提示訊息，使用者體驗很差。

 

 

我這裡是用一個div套在input外邊，去監聽input中的內容，邏輯如下：（雖然不靈活，但能夠比較容易想象）

 

 

6.IE8及以下不相容 JQuery 2.x 版本：

在IE8以下，對JQuery就不相容了，這時我們要降級到1.x。上程式碼：

 <!--[if !IE 8]><!-->
    <script type="text/javascript" src="{$WEB_URL}/Public/pdsWeb/static/jquery.min.js"></script>
    <script src="{$WEB_URL}/Public/pdsWeb/static//swiper/js/swiper.min.js"></script>
<!--<![endif]-->
<!--[if  IE 8]>
    <script type="text/javascript" src="{$WEB_URL}/Public/pdsWeb/static/jquery-1.9.min.js"></script>
    <script src="{$WEB_URL}/Public/pdsWeb/static//swiper/js/idangerous.swiper.min.js"></script>
<![endif]-->

7.IE8及以下不相容CSS3:

CSS3是前端人的魂啊，沒CSS3了，頁面的視覺效果就會大打折扣。

像常用的border-radius圓角，就得強行變成方角了。

如果強行要圓角，也不是不行，有外掛引外掛，不行了一個畫素一個畫素畫div也是個辦法。（辦法總比問題多）

最難受的是CSS3中的選擇器都用不了了，也只能用傳統選擇器了。

8.對於IE7及以下版本的相容：

這裡就太坑了，感覺一下回到了解放前。

只是說這裡可以使用css hack進行特定的屬性相容。

 

============================================== 分割線 ==================================================

 

持續更新中……

 

　　

相關文章