1. 设置IE<select> 下拉箭头

1
2
3
4
5
6
7
8
select::-ms-expand { display: none; }

select {
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
}

2. 清除IE<select>选中后的蓝色背景

1
2
3
4
select::-ms-value{
  background: transparent;
  color: #000;
}

3. 去除IE<input>清除按钮

1
2
3
4
input::-ms-clear{
  width: 0;
  height: 0;
}

4. 去除chrom浏览器记住密码

1
2
<input name="username" autocomplete="off" />
<input name="password" autocomplete="new-password">

5. 去除<a>点击时的灰色背景

1
2
3
4
5
6
a,a:hover,a:active,a:visited,a:link,a:focus{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  outline:none;
  text-decoration: none;
}

6. favicon.ico

Chrome, firefox请求的是: link的href所对应的图标
搜狗浏览器, 360浏览器, qq浏览器请求的是: http://host:3529/favicon.ico 或 http://host/favicon.ico (360浏览器会忽略端口)

如果要让favicon.ico的兼容性更好: 最好放在根目录

  • 检查网站根目录下的favicon.ico, 图标是否正确
  • 确保使用的是根目录 host/favicon.ico
    1
    <link rel="icon" href="http://host/favicon.ico" type="image/x-icon">

7. 绑定事件

  • IE支持attachEvent, detachEvent
  • Chrome和firefox支持addEventListener, removeEventListener

8. IE min-height在flex容器里无效

上中下布局，在原有wrapper外添加.app{ display: flex }。
Chorme, Firefox, Safari, IE11, IE10有效 具体查看

9. IE 不支持css属性值unset

用initial代替

10. IE11 flex多列布局 无视border-box

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="main">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<style>
*{
  box-sizing: border-box;
}
.main{
  display: flex;
}
.item{
  flex: 0 0 33.3%;
  padding: 10px;
}
</style>

在Chrome, firefox上会挤在一行里，每个item之间有20px的间距。但在IE11下，flex-basis设置的是具体的宽度，它会无视我们设置的box-sizing: border-box;，这时，最后一个元素会溢出容器，显示为两行。解决方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="main">
  <div class="item">
    <div></div>
  </div>
  <div class="item">
    <div></div>
  </div>
  <div class="item">
    <div></div>
  </div>
</div>
<style>
*{
  box-sizing: border-box;
}
.main{
  display: flex;
}
.item{
  flex: 0 0 33.3%;
}
.item > div{
  margin: 0 10px;
}
</style>

11. 去除Safari input textarea阴影

1
2
3
input, textarea{
  -webkit-appearance: none;
}

12. 可滚动<div>中padding-bottom无效

给里面的元素添加padding值

13. js实现base64图片下载

在IE11中，会报错“传递给系统调用的数据区域太小”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const imgUrl = 'data:image/png;base64,...'
// IE中使用msSaveOrOpenBlob方法（
if (window.navigator.msSaveOrOpenBlob) {
  var bstr = atob(imgUrl.split(',')[1])
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  var blob = new Blob([u8arr])
  window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
} else {
  // 创建a标签，触发点击
  const a = document.createElement('a')
  a.href = imgUrl
  a.setAttribute('download', 'chart-download')
  document.body.appendChild(a)  // 兼容firefox，firefox不能下载跨域资源
  a.click()
}

14. IE new Date()出现NaN

new Date("2014-01-01 12:11:12").getTime()在IE下会返回NaN，而其他浏览器可以返回正常毫秒数。使用Date.parse()可解析一个日期时间字符串，并返回毫秒数。

1
2
var date="2014-01-01 12:11:12";  
Date.parse(date.replace(/-/g,"/"));

15. IE 11 缓存get请求

1
2
3
4
5
6
// 判断get请求时，追加请求参数
const isIE = !!window.ActiveXObject || 'ActiveXObject' in window; // 判断是否IE浏览器

if (isIE) {
  params = { ...params, t: new Date().getTime() };
}

16. 使用了text-overflow: ellipsis

element UI table 的 show-overflow-tooltip当隐藏的字段为两个字符长度时，字段超出隐藏了，但是hover无法显示tooltip。scrollWidth和offsetWidth，在chrome, firefox, ie中表现不一样。
https://github.com/ElemeFE/element/issues/18065
https://github.com/ElemeFE/element/issues/5049

参考资料