IE 兼容笔记_ie11的兼容性视图设置在哪
IE浏览器css属性兼容前缀：-ms-
( 插个队：Chrome,safari兼容前缀：-webkit- ；Opera兼容前缀：-o-；firefox兼容前缀：-moz- )
————————————————————————————————————————————
一:input
IE 浏览器中 ，el-select 支持搜索功能时，input 输入框后的 清除图标 X , 在 输完后会很大很丑。隐藏X图表办法：
.el-select_tags input[type='text']::-ms-clear{
display:none; } .el-select_tags input[type='text']::-ms-reveal{
display:none; } .el-select_tags input[type='search']::-ms-clear{
display:none; } 若添加后不生效，记得看下权重 优先级 important！
二：文字在IE浏览器下不换行。
由于word-wrap是一个CSS3属性，它只支持IE9和更高版本。
word-wrap: break-word; -ms-word-wrap: break-word; 三：IE 不兼容 axios的promiss对象;
在项目中使用了ES6 promise对象
安装：npm install es6-promise；
四：IE 不兼容es6语法；
IE不支持ES6语法
安装：npm install --save babel-polyfill；
配置：module.exports = { entry: [“babel-polyfill”, “./src/main.js”] };
main.js中配置：import ‘babel-polyfill’ //放在最顶部，确保全面加载。
五：dom.click()方法无点击事件进行下载ie认为是漏洞
判断下是不是IE浏览器，然后特殊处理：
let blob = 'xxx' // blob对象 if (!!window.ActiveXObject || 'ActiveXObject' in window) {
window.navigator.msSaveBlob(blob, imgText + '.png') } else {
let a = document.createElement('a') a.setAttribute('href', URL.createObjectURL(blob)) a.clock() } 六：ie浏览器当前页版本11，打开新的页面或链接后，空白页或报错报错 “对象不⽀持“addEventListener”属性或⽅法。
是因为当前页的ie版本对文档模式的兼容造成的兼容问题。
解决办法： 在 meta 标签中加⼊ http-equiv=“X-UA-Compatible” 和 content=“IE=EDGE” ，这个属性主要是设置浏览器优先使⽤最新文档模式来渲染页⾯。
X-UA-Compatible 属性值 是 IE 浏览器在 IE 8 版本开始 提供的一个特性。针对 IE 8 以上浏览器的一个属性，IE 8以下版本 无法识别。就是说 IE 8 以上浏览器 遇到这个属性,才会执行 content 的描述。在IE8以下的 IE7、IE6等等中无效。
X-UA-COMPATIBLE 的 使用示例
示例1: 强制浏览器 按照特定的 版本标准 进行渲染，但不支持 IE7及以下版本。
<meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8"> 示例2:强制 IE8 浏览器, 使用 IE7 进行渲染
<meta http-equiv="X-UA-Compatible" content="IE=7" /> 示例3: (不建议 使用的语法) 指定 某个 IE版本的文档模式，但也允许例外。
在 IE 版本号 前面加上 Emulate ，代表，
如果网页开头 有 <!DOCTYPE>标记 就使用该 IE版本的标准文档模式
否则使用 怪异模式（即等同于 IE=IE5）,即,模拟 IE6
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 示例4: 总是使用 最新版本 文档模式,不准备兼容 所有 旧版 IE
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 如果不使用 content=“IE=Edge” 属性值，IE 浏览器 会根据网页内容 采用 兼容视图，可能 采用 更低版本。
示例5: ★ 目前 最佳的兼容模式 — 如果安装了 Google Chrome Frame （谷歌浏览器 內嵌框架）, 则使用 谷歌浏览器 内核模式，否则使用 最新的 IE 模式。
针对 IE 6，7，8 等版本的 浏览器插件 Google Chrome Frame，可以让用户的浏览器外观 依然是 IE的菜单和界面，但用户在 浏览网页时，实际上使用的是 Google Chrome 谷歌浏览器 内核。
如果不指定ie=edge,仅指定chrome=1 时，当用户浏览器 没有 chrome 内核时，会弹出提示框，提醒用户 安装该内核。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 七：IE 11 flex:1;样式会出错，跟实际想要的效果不同
因为IE11 flex:1;会识别为flex:1 1 0;⽽其他浏览器是flex:1 1 auto;
所以改为width:100%;flex:1 1 auto; 或width:100%;flex-grow:1
八：element-ui框架 在ie9浏览器下的兼容问题
el-select组件内在IE9中会出现样式错乱，解决办法：
// select框固定下拉箭头兼容ie9 .el-select .el-input .el-input__suffix .el-icon-arrow-up{
-ms-transform: rotate(180deg)\0; } 九：min-height
标签最低高度设置min-height不兼容，因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
解决：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px;height:auto !important;height:200px;overflow:visible;}
注：在B/S系统前端开发时，有很多情况下我们有这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
十：清除浮动
.clearfix::after {
content: ""; display: table; clear: both; } .clearfix {
*zoom: 1; } 十一：盒模型
box-sizing: border-box;
