pc端相容IE9及以上版本
阿新 • • 發佈:2020-11-12
最近業務部門反映我們商城的相容性不是很好,尤其是在IE瀏覽器上,經過調研,我們決定對IE9及以上版本的IE核心瀏覽器進行主流程測試,發現有哪些功能在IE9上不相容
一、CSS相容性
- 如下圖所示 使用了Button標籤,在IE瀏覽器或者是IE核心的瀏覽器按鈕文字卻沒有顯示。F12看下程式碼:
很明顯,在IE瀏覽器少了個css屬性:line-height:33px;加上這個屬性,在IE瀏覽器上就可以顯示文字了。
Tip:今後如果有開發人員再使用button這個標籤,記得加上line-height這個屬性,並且這個屬性的值和height保持一致。
2. 儘量不要使用absolute絕對佈局,使用 float屬性在IE瀏覽器相容性會更好
二、html相容性
- 在IE9瀏覽器中input 標籤沒有placeholder 屬性,使用時會無效果。
解決方案:使用input value值取代placeholder值
在需要使用input placeholder屬性時引用已經封裝好的input-placeholder-ie9.js指令碼
<script type="text/javascript" src="${CDNRoot}/template/tongan/statics/js/input-placeholder-ie9.js?time=202011051830"></script>
三、IE瀏覽器選擇檔案
- IE瀏覽器出現選擇檔案彈出框時,不會再往下執行程式碼
除錯過程中發現,每次出現選擇檔案彈出框,選擇完圖片之後,並未執行程式碼2,也就是說沒有走進回撥方法裡。最後將程式碼1和程式碼2的順序跌倒,問題解決。
四、IE瀏覽器出現亂碼和400或者404
- 在IE瀏覽器中href=““或者window.open(),window.location.href裡面的請求連結如包含漢字或特殊字元就會導致介面請求報錯
以上是3個比較典型的案例,都是頁面404或者介面請求失敗,
分析:jsp通過url請求傳遞引數給後端,但是url的格式不對會造成請求失敗。這種url的問題常發生在在
解決方法:手動給url編碼。
function searchProduct(searchFields){ window.location.href = webPath.webRoot + "/productlist.ac?keyword=" + encodeURI(searchFields); }
五、IE9瀏覽器上傳檔案
IE9瀏覽器是不支援FormData()格式上傳檔案的,當執行到var formData = new FormData();這行程式碼時就會報錯。為了不破壞之前的程式碼,前臺和後臺一般會再寫一套針對IE9瀏覽器的檔案上傳的程式碼
<script type="text/javascript" src="${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 = 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’。