最近業務部門反映我們商城的兼容性不是很好，尤其是在IE瀏覽器上，經過調研，我們決定對IE9及以上版本的IE內核瀏覽器進行主流程測驗，發現有哪些功能在IE9上不兼容

一、CSS兼容性

　　1.如下圖所示使用了Button標簽，在IE瀏覽器或者是IE內核的瀏覽器按鈕文字卻沒有顯示，F12看下代碼：

　　很明顯，在IE瀏覽器少了個css屬性：line-height:33px；加上這個屬性，在IE瀏覽器上就可以顯示文字了，

　　Tip:今后如果有開發人員再使用button這個標簽，記得加上line-height這個屬性，并且這個屬性的值和height保持一致，

　　2.盡量不要使用absolute絕對布局，使用float屬性在IE瀏覽器兼容性會更好 

二、html兼容性

　　1.在IE9瀏覽器中input 標簽沒有placeholder 屬性，使用時會無效果，

　　 解決方案：使用input value值取代placeholder值

　　在需要使用input placeholder屬性時參考已經封裝好的input-placeholder-ie9.js腳本

<script type="text/javascript" src="https://www.cnblogs.com/husfBK/archive/2020/11/12/${CDNRoot}/template/tongan/statics/js/input-placeholder-ie9.js?time=202011051830"></script>

三、IE瀏覽器選擇檔案

　　1. IE瀏覽器出現選擇檔案彈出框時，不會再往下執行代碼

　　除錯程序中發現，每次出現選擇檔案彈出框，選擇完圖片之后，并未執行代碼2，也就是說沒有走進回呼方法里，最后將代碼1和代碼2的順序跌倒，問題解決，

四、IE瀏覽器出現亂碼和400或者404

　1. 在IE瀏覽器中href=https://www.cnblogs.com/husfBK/archive/2020/11/12/““或者window.open(),window.location.href里面的請求鏈接如包含漢字或特殊字符就會導致介面請求報錯或者404 400

　　分析：jsp通過url請求傳遞引數給后端，但是url的格式不對會造成請求失敗，這種url的問題常發生在在IE瀏覽器中，其他瀏覽器火狐、chrome等不會有問題，因為谷歌中會自動給空格和一些特殊字符編碼，而IE沒有這一步，

　　解決方法：手動給url編碼，

function searchProduct(searchFields){
    window.location.href = webPath.webRoot + "/productlist.ac?keyword=" + encodeURI(searchFields);
}

五、IE9瀏覽器上傳檔案

IE9瀏覽器是不支持FormData()格式上傳檔案的，當執行到var formData = https://www.cnblogs.com/husfBK/archive/2020/11/12/new FormData();這行代碼時就會報錯，為了不破壞之前的代碼，前臺和后臺一般會再寫一套針對IE9瀏覽器的檔案上傳的代碼

<script type="text/javascript" src="https://www.cnblogs.com/husfBK/archive/2020/11/12/${CDNRoot}/template/tongan/statics/js/jquery.form.js"></script>

<form action="${webRoot}/member/paircoderelation/paircoderelation/upload.ac" enctype="multipart/form-data" method="post" id="_upload_from" >
            <div class="_view_line">
                <span class="_view_line_lable">上傳附件:</span>
                <input class="excle_file" type="file" accept=".xlsx;" name="excleFile"/>
            </div>
            <div class="_view_line">
                <input onclick="uploadFile();" class="import_upload_btn" type="button" value="上傳檔案"/>
            </div>
  </form>

//1.匯入（上傳檔案）
function uploadFile() {
    var ver = getBrowserType();
    if(ver=="IE6" || ver=="IE7" || ver=="IE8" || ver=="IE9"){
        console.log('檔案file=>',$('.excle_file').val());
        var file = $('.excle_file').val();
        if(file != ''){
            var options = {
                url :webPath.webRoot + "/member/paircoderelation/paircoderelation/upload.bin",// 跳轉到 action
                dataType:'text/html',
                success : function (data) {
                    window.location.href = webPath.webRoot + "/module/member/xxxxx.ac";
                },
                error : function() {
                    showAlert("匯入excel失敗", "error");
                    console.log('報錯------')
                }
            };

            $('#_upload_from').ajaxSubmit(options);
        }
    }else{
        var formData = https://www.cnblogs.com/husfBK/archive/2020/11/12/new FormData();
        if ($('.excle_file')[0].files[0] == null) {
            showAlert("請選擇Excle檔案", "error");
            return;
        }
        formData.append("excleFile", $('.excle_file')[0].files[0]);
       
        $.ajax({
            type: "post",
            url: webPath.webRoot + "/xxxxxx.json",
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                
                console.log(data.errors);
                
            },
            error: function (XMLHttpRequest, textStatus) {
                
            }
        });
    }
}

前臺判斷是否是IE9一下版本的瀏覽器，如果是，就使用Form表單ajaxSubmit()形式上傳

注意ajax的dataType要寫成是‘text/html’,不能是‘json’，

標籤：其他

上一篇：介紹下promise的特性,優缺點，內部如何實作的，動手實作一個promise (一)

下一篇：css3 animation影片，你會用了嗎？ -cyy