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(0, 0, 0, 0) url("../imgs/placeOrder/icon_select_l@1x_org.png") no-repeat scroll 0 0;
  background-image: -webkit-image-set(url(../imgs/placeOrder/icon_select_l@1x_org.png)  1x, url(../imgs/placeOrder/icon_select_l@2x_org.png) 2x);
  background-image: -moz-image-set(url(../imgs/placeOrder/icon_select_l@1x_org.png) 1x, url(../imgs/placeOrder/icon_select_l@2x_org.png) 2x);
  background-image: -ms-image-set(url(../imgs/placeOrder/icon_select_l@1x_org.png) 1x, url(../imgs/placeOrder/icon_select_l@2x_org.png) 2x);
  background-image: -o-image-set(url(../imgs/placeOrder/icon_select_l@1x_org.png) 1x, url(../imgs/placeOrder/icon_select_l@2x_org.png) 2x);

改为:

li 标签的value属性

html li标签设置value诡异的问题
设置html标签的自定义属性