天天看點
傳回

layui架構IE8下的相容問題收錄一

IE8

一丶相容ie所需的一些插件及使用

　　1).相容h5新屬性和标記插件 html5.min.js

　　2).相容ajax跨域(CORS)的插件在ie報錯 jquery.xdomainrequest.min.js詳細介紹網址

https://blog.csdn.net/weixin_39279356/article/details/81390183

　　3).相容ie67的JSON. Stringify/ parse json2.js

使用方法：

<!--[if lt IE 10]>

//相容ie67的JSON. Stringify/ parse

<![endif]-->

二丶關于ajax調用

Ajax 不支援async=falseIE8，9 預設不支援 CORS 請求

解決方式:

在ajax請求前加jQuery.support.cors = true;//如果要同步請求才會遇到這行代碼

需要引入jquery.xdomainrequest.min.js

Jq的ajax建議寫法

               $.ajax({

                        url: url,

                        type: "post",

                        async: true,

                        data: data,

                        cache: false,  //ajax浏覽器緩存機制，ie會判斷如果請求過了接口後。下一次就會從緩存擷取結果一直是第一次的

                        timeout: 120000,

                        contentType: "application/json;charset=UTF-8",  //推薦寫這個

                        dataType: "json",

});

三、關于css樣式和html

1).Css選擇器  :nth-child在ie8下不相容

通過js控制在一些插件的表格奇偶行不同背景色會有遇到。

2).Margin-bottom

在谷歌下會撐起父元素高度，下邊顯示空白，在ie下不會撐起父元素高度，如果需要留白可以設定高度或者padding

3).Css3媒體查詢的Max/min-width 在ie8下不生效

引入respond.js

4).透明度opacity在ie不相容

解決方法：style="cursor: default;opacity: 0;filter:alpha(opacity=0);"

5). Img 的src字元串的大小在ie8最大限制為32kb 對于一些較大的base64字元串需要進行壓縮處理方式一：字寫函數,但是需要用到canvas，canvas在ie8 不相容，需要引入excanvas.js檔案注意隻能在head裡邊引入。但是使用過程中會報空指針錯誤暫未發現原因。

     方式二：背景處理可以使用

四、Echarts插件

1).Width和height不支援百分比

     2).插件的問題：Echarts加了interval(預設坐标軸間隔，占不下自己隐藏)屬性，X軸最後一個字型會加粗

     可以改為js判斷字數然後截取…顯示。滑鼠劃入事件綁定：因為echarts最後生成的是一個canvas，是以隻能通過echarts自帶的綁定事件，在echarts渲染完成後綁定

echartsobj.on('mouseover', function (params) {});

echartsobj.on('mouseout', function (params) {});

五、js/jq

1).Js自動去掉空格的函數trim 在ie不好使，改用jq的$.trim(value);

2). Placeholder 在ie89不相容

解決：第一個引入插件但是會修改input的value值，對非空驗證不友好

第二個手寫一個span 添加點選事件擷取對應的input$(input).trigger("focus")觸發input自帶的擷取焦點和失去焦點事件

3).禁用按鈕回車空格倒退鍵代碼：// 防止頁面後退

$(document).on("keydown", function (event) {

var ev = event || window.event; //擷取event對象 

    var obj = ev.target || ev.srcElement; //擷取事件源 

    var t = obj.type || obj.getAttribute('type'); //擷取事件源類型 

    var code = event.keyCode || event.which;

    //還需要判斷是不是處于輸入框的狀态

    if ((code == 13 || code == 8) && t != "password" && t != "text" && t != "textarea") {

        return false

    }

})

     4).按鈕禁用

　　　　給按鈕綁定了click事件需求點選之後禁用

　　 第一種方式使用pointer-events: none;css樣式在ie下禁止不了

第二種方式使用disable屬性可以生效，但是如果綁定事件是按鈕的話在ie會出現重影

     第三種，直接用off去掉on事件(适用于每次頁面僅點選一次)類似系統設定按鈕

　　 第四種，使用one()綁定事件

5).Input禁止編輯

               第一種：disabled 相容所有浏覽器

第二種：readonly可以擷取焦點也能實作不可編輯但是，使用倒退鍵的時候在ie8下回觸發浏覽器後退事件

6).關于dataset屬性

     在layui下拉框的使用中，需要擷取目前選中的自定義屬性data-值，在使用layui文檔中方法的時候用到了dataset的屬性data.elem[data.elem.selectedIndex].dataset.policeid;但是在ie10擷取不到這個屬性解決：改用jq擷取選中對象$(data.elem[data.elem.selectedIndex]).data("policeid")如果是數字的話按需求改變為字元串

Layui

一、表單

1).下拉框

               Layui下拉框select 在html頁面必須有個option

     下拉框在ie padding失效，文字和小箭頭重合解決方法：

               if(extension.isIE89()){

     $(".selectlayui-input-block").append("<span style='padding-top:15px;padding-left: 12px;height: 50%;width: 25px;background:#fff;position: absolute;top: 1px;right: 1px;'><i style='width:0;height:0;border-width:5px 5px 0;border-style:solid; border-color:#C2C2C2 transparent transparent;float: left'></i></span>");

}

還有一種在生成的時候增加預設值請選擇待驗證

2).第一種情況：非空驗證的時候input和select在ie8不會标紅第二種情況：設定了disabled的input在所有浏覽器也不會标紅(因為擷取不到焦點被阻止了)。

解決驗證時候在form. verify對應的規則裡邊手動加上紅框用settimeout設定紅色邊框消失時間

二、表格

1).Table檢視單元格更多資訊的時候，如果全是英文，在ie下會出現滾動條和多餘高度，解決：給更多資訊的tips增加word-wrap:break-word; overflow:hidden;

     2).表頭按鈕的樣式在ie8下的預設顔色是綠色，因為ie8不支援nth-child選擇

     3).表格在ie8下滑鼠滑動會跟着跳動不同情況：

               1,滑鼠劃入帶有檢視更多的單元格的時候，分頁器會自動下移出現橫向滾動條。解決方法：在table的done函數裡邊，給改變table的高度，擷取父元素的高度。

// 滑鼠在table框上移動時候 高度變高

var box = $("#box_height").find(".layui-table-box")

        var height = $(box).find(".layui-table-body").css("height")

        var boxheight = parseInt(height) + 36 + "px"

        $(box).css("height", boxheight);

高度36可根據實際頁面上下微調。

上邊修改會出現新的問題，如果修改table的篩選列，因為高度不能自适應，導緻橫向滾動條無法顯示最新解決辦法

// 滑鼠在table框上移動時候  高度變高

changeTableHeight();

var oldtablemainheight = $(".layui-table-main").height();

     //監聽點選事件手動修改表格高度

$(document).on("click", function (e) {

  if (oldtablemainheight != $(".layui-table-main").height()) {

    changeTableHeight();

  }

})

function changeTableHeight(obj) {

var box = $("#box_height").find(".layui-table-box");

var height = $(box).find(".layui-table-body").css("height");

var boxheight = parseInt(height) + 38 + "px";

$(box).css("height", boxheight);

還需要增加一個window.onrisize事件，為了在切換浏覽器視窗的時候寬度不夠出現滾動條，還要在篩選項table.js源碼也增加這個事件，篩選列改變也會影響表格寬度

4).表格表頭

表頭的行設定的min-height是50px;但是在ie下不會生效，高度太高，是以改成了0px，這就影響到沒有表頭按鈕的時候，右邊篩選列會和下邊單元格重疊。解決：增加一個透明度為0的不可點選的按鈕。透明度opacity在ie不相容解決方法：style="cursor: default;opacity: 0;filter:alpha(opacity=0);"

5).表格隔行不變色和nth選擇器有關系css在ie8不支援nth。改用jq在done回調函數裡邊動态修改

三、檔案上傳

1).上傳檔案的按鈕和表頭結合使用

     在table表頭的按鈕，上傳檔案後，重新整理表頭，按鈕不起作用解決：把upload初始化寫在table的done事件裡面

四、富文本編輯器

1).指派

layedit.setContent(richtext, "", false);之前不好用但是最新驗證又能使用了保險起見還是更改指派方式先給textarea複制然後在渲染

2).樣式問題

編輯器提供的超連結按鈕打開後按鈕預設顔色是綠色解決：修改源碼增加類名在相應頁面增加css修改樣式

3).富文本編輯器的超連結、圖檔和表情功能在ie使用不了。

五、時間選擇器

如果給預設值的話，第一次打開選擇器，選擇時間的時候不會自動清除預設的時間，解決：在源碼前增加個判斷手動修改判斷條件

時間選擇器的placeholder在done事件裡邊添加類似下拉框的提示資訊

六、樹形結構

在ie8無法打開的問題：修改源碼packDiv = $('

'),三元判斷由空改為現在這個

彈出框按鈕

在ie下彈框的按鈕按照按鈕順序來判斷，隐藏第一個按鈕後第二個按鈕會走第一個函數的回調。解決：在打開前找個數組填充按鈕，先指派再打開。

     樹形結構的前邊的字型圖示在ie8下顯示不全。隻能通過js判斷浏覽器在ie8下增大font-size

七、Tab頁籤

layui頁籤和echarts結合使用，切換的時候在ie下會出現跳動情況，原因是監控window.resize()後表格會因為出現橫向滾動條，導緻視窗高邊變化觸發resize事件，然後橫向滾動條消失，再次觸發resize事件一直循環觸發。解決：給帶有類名layui-tab-content的div設定一個高度。

八、栅格系統

在ie 隻有layui-col-xs xs好使

前端開發 javascript 監控 移動開發 javascript前端開發css javascript程式員前端教程 java移動開發 javascript前端教程 web前端開發javascript
上一篇: MTSC2020 | 手淘AIOPS實戰-消息全鍊路智能監控
下一篇: ECS雲伺服器使用體驗

繼續閱讀