兼容IE总结

兼容IE的问题

1、更改input、textarea的提示语颜色

• 解决办法

// 更改input,textarea 兼容样式
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #b3b3b3 !important;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:#b3b3b3 !important;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color:#b3b3b3 !important;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color:#b3b3b3 !important;
}

2、文件下载处理兼容IE

let blob = new Blob([data]);
let url = window.URL.createObjectURL(blob);
let link = document.createElement("a");
link.style.display = "none";
link.href = url.replace(/"/g, "");
let fileName = res.headers["content-disposition"];
if (fileName && fileName.length >= 2) {
    fileName = fileName.split("=")[1];
}
fileName = decodeURIComponent(fileName);

// 兼容IE
if(navigator.userAgent.indexOf("Trident") > -1){
    window.navigator.msSaveBlob(blob, fileName);
}else{
    link.setAttribute('download', fileName)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}

3、get请求清除缓存 IE浏览器

• get请求需要将汉字编码

// IE 开发不用localhost  用IP地址
if(method === 'GET'){
    headers['cache-control'] = "no-cache"
    headers['Pragma'] = 'no-cache'
}

4、单行超出隐藏

• 内容

<table class="stable">
    <tr class="t-header">
        <th style="width: 30px;">序号</th>
    </tr>
    <tr class="t-body" >
        <td class="name">ddhfkjds</td>
    </tr>
</table>

• IE处理

.name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
white-space: nowrap;
}
.stable{
table-layout: fixed;
}

• google处理

.name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

5、时间兼容IE

const date = '2019-01-01'.replace(/-/g, '/');
const timestamp = new Date(date).getTime();