[TOC]

ie11 transform兼容

-ms-transform 兼容ie11, 但是很遗憾可不支持transform3d，所以

方案一，向下兼容需要两套切换样式，使用js 动态更改这套切换样式，会给人不统一
方案二，提示该环境下不显示，这显然不合理
方案三，使用transform3d垫片，这个得去找插件

ie11 @font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的

解决办法为：引入ETO格式文件

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

ie9不能用flex布局

ie10以上才行，所以ie9不建议使用flex布局，在can i use 网站查的

ie9 文件下载个数有限制，导致图片和css文件下载不全

项目在ie9上样式缺失，想着兼容性的原因修改了一遍代码排查了js 兼容性bug 没有什么作用，然后发现样式表只加载了31个，很诧异，百度，找到原因

Referring the following from Microsoft:

Stylesheet Limits in Internet Explorer
KB - A webpage that uses CSS styles does not render correctly in Internet Explorer
The rules for IE9 are:

A sheet may contain up to 4095 selectors (Demo)
A sheet may @import up to 31 sheets
@import nesting supports up to 4 levels deep

The rules for IE10 are:

A sheet may contain up to 65534 selectors
A sheet may @import up to 4095 sheets
@import nesting supports up to 4095 levels deep

Stylesheet Limits in Internet Explorer

解决方案

普通项目(多css引入项目)，引入的css代码是否必须，删除或者缩减没必要的css代码，或者将第一次必须引入的css提前，然后后面的再动态加载
各种能CDN链接的样式用CDN （不是很合理，不安全，不稳定）
在打包成一个文件的项目，用插件css-split-webpack-plugin

//引入
npm install --save-dev  css-split-webpack-plugin


const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
 
// 在webpack.prod.conf.js里加入如下代码
plugins: [
 new CSSSplitWebpackPlugin({
        size: 4000,
        filename: 'static/css/[name]-[part].[ext]'
    }),
]

配置之后，打包后的结果会分成多个包

PS:ie9支持css

使用css @supports属性进行优雅降级兼容性处理

@supports <条件规则> {
  /* 特殊样式规则 */
}

@supports (display:flex) {
  section { display: flex }
  ...
}

上面这段代码的意思是：如果浏览器支持“display:flex”属性，那么在“section”元素上就运用“display:flex”样式

支持 and,or，not操作

@supports (animation-name: test) {
    … /* 如果支持不带前缀的animation-name,则下面指定的CSS会生效 */
    @keyframes { /* @supports是一个CSS条件组at-rule,它可以包含其他相关的at-rules */
      …
    }
}

//检测是否支持指定的CSS属性或者其带前缀版本
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
    … /* 如果支持不带前缀以及带前缀的perspective属性,则下面指定的CSS会生效 */
}

//检测是否不支持指定的CSS属性
@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* 这里的CSS代码用来模拟text-align-last:justify */
}

ie9js不执行，无错误，调出资源管理器后执行

问题描述：ie9在调出资源管理器后正常执行，在未调出js卡在某一些阶段停止执行
问题根源：ie9自身不调出资源管理器，不生成console对象，而且遇到代码中的console因为找不到停止执行
解决方案：在ie9模式下重写所有可能用到的console下的方法，有很多插件会应用到console力的各种方法

//重写代码
var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }

ie兼容性问题集合