IE8 兼容性问题

IE8 兼容性问题

设置script标签内容

在IE8中,下面的代码报错:

$('#invoiceListDot').text(htmlTemplate);
           

说明:invoiceListDot 是一个script标签

<script id="invoiceListDot" type="text/x-dot-template">  
               {{? it.invoiceInfoDtos}}  
               {{ for(var prop=0;prop  
               <it.invoiceInfoDtos.length  
                       ; prop++){ }}  
                       {{? it.invoiceInfoDtos[prop]}}  
               <div class="{{ if(prop==0 && it.create==true){}}invoice-infor {{ }else {}}no-invoice{{ }}}"  
                    data-index="{{= prop }}">  
                   <span class="no-ivoice-icon"></span>  
                   <span>普通发票</span>  
                   <span class="ivo-margin invoiceType">{{= it.invoiceInfoDtos[prop].content }}</span>  
                   <span class="ivo-margin invoiceCompany">{{= it.invoiceInfoDtos[prop].title }}</span>  
                   <span class="ivo-margin invoiceAddress">{{= it.invoiceInfoDtos[prop].address }}</span>  
                   <span class="ivo-margin invoicePerson">{{= it.invoiceInfoDtos[prop].receiver }}</span>  
                   <span class="ivo-margin invoicePhone">{{= it.invoiceInfoDtos[prop].phone }}</span>  
               </div>  
               {{?}}  
               {{ } }}  
               {{?}}  
           </script>  
           

改为如下代码也报错:

$('#invoiceListDot').html(htmlTemplate);
           

这是IE8的兼容性问题.

解决方法:

在js中判断浏览器类型,若是IE8,则执行

$('#invoiceListDot').innerHTML = htmlTemplate; 
           

整个逻辑判断如下:

if (getBrowserVersion.isIE8) {  
       $('#invoiceListDot').innerHTML = htmlTemplate;  
   } else {  
       $('#invoiceListDot').text(htmlTemplate);  
   }                  

获取script标签的内容的时候:

var tmplate = $invoiceListDot.text();//IE8中返回空字符串  
                   if (!tmplate) {  
                       console.log('$invoiceListDot.text() return null');  
                       tmplate = $invoiceListDot.html();  
                   }                  

IE识别不了有空格的json

比如

{

“path”:”huang wei”

}

IE7中动态创建表格时,必须要创建tbody,否则表格不显示

var tb = put('table.service');  
if (BrowserVersion.isIE7 || BrowserVersion.isIE6) {  
                tb=put(tb,'tbody');  
             } 
           

设置2x背景图片IE8中不显示

有问题的css样式:

background: rgba(, , , ) url("../imgs/placeOrder/[email protected]_org.png") no-repeat scroll  ;
  background-image: -webkit-image-set(url(../imgs/placeOrder/icon_select_l@1x_org.png)  x, url(../imgs/placeOrder/icon_select_l@2x_org.png) x);
  background-image: -moz-image-set(url(../imgs/placeOrder/icon_select_l@1x_org.png) x, url(../imgs/placeOrder/icon_select_l@2x_org.png) x);
  background-image: -ms-image-set(url(../imgs/placeOrder/icon_select_l@1x_org.png) x, url(../imgs/placeOrder/icon_select_l@2x_org.png) x);
  background-image: -o-image-set(url(../imgs/placeOrder/icon_select_l@1x_org.png) x, url(../imgs/placeOrder/icon_select_l@2x_org.png) x);
           

改为:

li 标签的value属性

html li标签设置value诡异的问题

设置html标签的自定义属性