HTML/CSS
1. 默认margin、padding不一致
* {margin: 0;padding: 0;}
2. css3的animation
IE9不支持
3. display: flex
IE9不支持;IE10部分支持,使用display: ms-flexbox flexbugs@github
IE10下,justify-content 对容器内的span不起作用,需要设置span display: block/inline-block
IE11支持不加前缀的flex,且flex容器内部各部分宽度相同(与其他浏览器不一致),解决办法是设置容器内部各成员 width: auto
在 IE11 上 align-items 对于设置 min-height 的父元素不能实现垂直居中,改为设置height即可
4. 多个img放在一起时,部分浏览器会有默认间距
img使用float布局
5. webkit / trident 中 iframe 有默认高度 其他无
6. IE11 th标签默认对齐方式为center,chrome为left,由于默认值的原因,若text-align是继承于父级的,也无效
9. IE11 button默认overflow:hidden,chrome为visible
10. PC上iframe内容超出时无法滚动,而移动端可滚动,且iframe内文本会自动换行
11. IE11 伪元素超出父元素边界的部分不会显示
12. IE11下使用负边距后该元素可能超出父元素边界,如果父元素有overflow则会出现滚动条(如使用负边距居中定位时)
13. IE11下color: #xxxxxx可能不能识别chrome那边能生成的颜色值,如8位的颜色值,使用六位的即可
JS
1. IE11中status 302的请求的response为undefined,并且request.status为0
2. IE11中使用js改变input的value会触发input的onchange事件,其他浏览器不会
// 若在onchange事件中对输入框处理完毕后手动设置value,会再次触发onchange事件
document.getElementById('#input').value = ''
3. IE11等浏览器不支持input选择文件夹(添加webkitdirectory属性)
4. IE若要阻止默认事件,使用event.returnValue = false,其他浏览器使用event.preventDefault()
5. IE若要阻止事件冒泡,使用event.cancelBubble = true,其他浏览器使用event.stopPropagation()
6. IE获取元素计算好的样式,使用el.currentStyle(),其他浏览器使用el.getComputedStyle()
PS:注意编译器的格式化代码,如VSCode里的Prettier,若设置了添加自动结尾comma,在format时会自动加逗号,这个ES6+特性在IE下是不支持
欢迎关注、点赞