目录
[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;
}
