tags: [组件]
categories: 业务场景解决方案

IE6/ IE7

非焦点元素对 :active 置若罔闻

IE 8

  • IE8- 都不识别自定义的标签元素

  • 不支持 border-radius: 可通过border-style：dotted来实现

IE9

  • 不支持flex布局

  • css行数过多会不加载，需要用CSSSplitWebpackPlugin分割

  1. new CSSSplitWebpackPlugin({
  2.     size: 4000,
  3.     filename:utils.assetsPath('css/[name]-[part].[ext]'),
  4.     }),

  • 不支持websocket

  • vue框架:

    • 刷新多次才显示界面

    • 滚动条 | 下拉框箭头 | 展开箭头 | 排序箭头

    • 消息x号不居中

    • 列表获得焦点样式,没有边框线

  • 能识别自定义标签以及伪类，但是不支持 animation

IE JS兼容性

  • 事件绑定方法为attachEvent而不是通用的addEventListener

  • 事件捕获方式由内而外而不是由外而内，一般将IE的标准定为标准

  • 事件获取目标元素event.srcElement而不是event.target

  • ajax是activeXObject

  • innerHtmlIE中不能操作tr的innerHtml

  • 获取DOM节点

  • IE: parentElement | parentElement.children

  • other: parentNode | parentNode.childNodes

在HTML中禁止IE缓存

IE 浏览器提供的 ajax 对象在发送 get 请求时，会查看请求地址是否访问过，如果访问过，则显示第一次访问的结果（也就是说，会将第一次访问的结果缓存下来）

  • 在Head里添加禁止使用缓存的代码
  1. <meta http-equiv="Pragma" content="no-cache">
  2. <meta http-equiv="Cache-control" content="no-cache">
  3. <meta http-equiv="Cache" content="no-cache">

  • 将所有的ajax调用都改为post方法

  • 在请求地址后面添加随机数或者时间戳,
    比如 xhr.open(‘get’,’luck.do?’+Math.random(),true,true));

兼容性测试工具

overflow 兼容性问题

chrome: 容器可滚动，padding-bottom 也算在滚动尺寸之内
IE和 Firefox 会忽略 padding-bottom
同时会导致 scrollHeight 值不一样
本质原因：chrome 是子元素超过 content box 尺寸触发滚动条显示，而IE 和 Firefox 是超过 padding box 尺寸触发滚动条显示
解决方案：如果需要留有间隙，则使用透明边框

WebP图片兼容性处理

https://github.com/RicardoCao-Biker/RICO-BLOG/issues/9

Firefox

Firefox 认为 :active 发生在 mousedown 之后