欢迎光临
我的个人博客网站

pc端兼容IE9及以上版本 IE浏览器兼容

最近业务部门反映我们商城的兼容性不是很好,尤其是在IE浏览器上,经过调研,我们决定对IE9及以上版本的IE内核浏览器进行主流程测试,发现有哪些功能在IE9上不兼容

一、CSS兼容性

  1.如下图所示使用了Button标签,在IE浏览器或者是IE内核的浏览器按钮文字却没有显示。F12看下代码:

 pc端兼容IE9及以上版本 IE浏览器兼容

 

pc端兼容IE9及以上版本 IE浏览器兼容

  很明显,在IE浏览器少了个css属性:line-height:33px;加上这个属性,在IE浏览器上就可以显示文字了。

  Tip:今后如果有开发人员再使用button这个标签,记得加上line-height这个属性,并且这个属性的值和height保持一致。

  2.尽量不要使用absolute绝对布局,使用float属性在IE浏览器兼容性会更好 

 pc端兼容IE9及以上版本 IE浏览器兼容

二、html兼容性

  1.在IE9浏览器中input 标签没有placeholder 属性,使用时会无效果。

 pc端兼容IE9及以上版本 IE浏览器兼容

   解决方案:使用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浏览器选择文件

  1. IE浏览器出现选择文件弹出框时,不会再往下执行代码

 pc端兼容IE9及以上版本 IE浏览器兼容

pc端兼容IE9及以上版本 IE浏览器兼容

  调试过程中发现,每次出现选择文件弹出框,选择完图片之后,并未执行代码2,也就是说没有走进回调方法里。最后将代码1和代码2的顺序跌倒,问题解决。

四、IE浏览器出现乱码和400或者404

 1. IE浏览器中href=““或者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 = 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()形式上传

注意ajaxdataType要写成是‘text/html,不能是‘json’。

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » pc端兼容IE9及以上版本 IE浏览器兼容
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏