

兼容语法查询网址：[https://caniuse.com](https://caniuse.com)

#### IE常见问题记录

[https://www.e-cology.com.cn/ecode/playground/doc/share/view/959129247504261122#1%E3%80%81loadjs%20%E5%8A%A0%E8%BD%BD%E7%A9%BA%E6%96%87%E4%BB%B6%E5%9C%A8%20IE11%20%E4%B8%8A%E4%BC%9A%E6%8A%A5%E9%94%99%E5%8A%A0%E8%BD%BD%E5%A4%B1%E8%B4%A5](https://www.e-cology.com.cn/ecode/playground/doc/share/view/959129247504261122#1%E3%80%81loadjs%20%E5%8A%A0%E8%BD%BD%E7%A9%BA%E6%96%87%E4%BB%B6%E5%9C%A8%20IE11%20%E4%B8%8A%E4%BC%9A%E6%8A%A5%E9%94%99%E5%8A%A0%E8%BD%BD%E5%A4%B1%E8%B4%A5)

#### E10底层bable支持语法说明：

[https://www.e-cology.com.cn/ecode/playground/doc/share/view/957652598989299714](https://www.e-cology.com.cn/ecode/playground/doc/share/view/957652598989299714)

---

##### 一、js 语法兼容问题

###### 1.1 toString.call 方法不兼容

错误用法示例：

```typescript
toString.call(xxx)
```

正确处理方法：

```typescript
Object.prototype.toString.call(xxx)
```

###### 1.2 节点遍历（NodeList)方法不兼容

文档中提出的处理方法 通过Array.from将NodeList转为数组再遍历 ，在有些浏览器较为过时，没有实现 NodeList.forEach() 和 Array.from()

错误用法示例：

```typescript
document.querySelectorAll('xxx').forEach
```

正确处理方法：

```typescript
const contains = document.querySelectorAll('xxx');

方法一：

Array.prototype.forEach.call(contains, (ele) => {xxx})

方法二：
for (var i = 0; i < contains.length; ++i) {
  xxx
}
```

###### 1.3 Object.assign不兼容IE问题

使用 Object.assign 在IE中报错，可写个公共兼容方法替换

##### 二、css样式问题

###### 2.1 flex: 1; 解析问题

原因：

```typescript
// 在谷歌中flex:1;会被解析成：
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

// 在IE中会被解析成：
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0px；

// flex-basis: 0 的支持效果不一致

错误用法示例：
```

错误用法示例：

```typescript
flex: 1;
```

正确处理方法：

```typescript
// 仅提供解决思路，灵活应用
flex: 1 1 auto; 或者 flex: 1 1 0%;
```

###### 2.2  分析 flex: 1 1 auto 和 flex: 1 1 0% 区别；

1、如果容器有足够的空间，flex:1 1 0%; 和 flex:1 1 auto; 都会平分剩余空间，但是flex:1 1 auto会优先将空间分配给最大内容的部分；flex:1 1 0%则是尽量和其它元素等分

> flex： 1 1 0%  事例

[图片附件未整合: _assets/961697736576466945/001-3a16af1842.png]

> flex: 1 1 auto 事例

[图片附件未整合: _assets/961697736576466945/002-e0bdfb6614.png]

2、 如果容器没有足够的空间，flex:1 1 0%; 会优先压缩内容，使得所有项目都能等分空间，而flex:1 1 auto; 会优先保持内容的完整性，挤压其他项目的空间。

> flex： 1 1 0%  事例

[图片附件未整合: _assets/961697736576466945/003-92ec0fd8a0.png]

> flex: 1 1 auto 事例

[图片附件未整合: _assets/961697736576466945/004-23d03645ec.png]

3、特殊情况注意使用

```typescript
// html
<div classname='container'>
	<div classname='left'></div>
	<div classname='right'></div>
</div>
```

> 容器无足够空间

```typescript
right 容器不设置flex情况下；若要自适应内容使用：flex: 1 1 0%;
// css
.container{
	display: flex;
	flex-flow: row wrap;
	.left{
		flex: 1 1 0%;
	}
	.right{
		width: 25px;
	}
}
```

图例：  
[图片附件未整合: _assets/961697736576466945/005-3592734eac.png]

```typescript
right 容器设置flex情况下；若要自适应内容：使用flex: 1 1 auto;
// css
.container{
	display: flex;
	flex-flow: row wrap;
	.left{
		flex: 1 1 auto;
	}
	.right{
		width: 25px;
        flex: 1 1 25px;
	}
}
```

图例：  
[图片附件未整合: _assets/961697736576466945/006-8973c75707.png]

###### 2.3  设置flex: 1 1 auto 文字过长超出容器

事例：

[图片附件未整合: _assets/961697736576466945/007-6562aa76ce.png]

错误用法示例：

```typescript
// html
<div classname='container'>
	<div classname='leftWrap'></div>
	<div classname='rightWrap'></div>
</div>

// css
.container{
	display: flex;
	flex-flow: row wrap;
	.leftWrap{
		width: 100px;
	}
	.rightWrap{
		flex: 1 1 auto;
	}
}
```

正确处理方法：

```typescript
解决方案一：
// css
.rightWrap {
	flex: 1 1 calc(100% - 100px);
}

解决方案二：
.rightWrap {
	flex: 1 1 auto;
	width: 0;
}

解决方案三：
.rightWrap {
	flex: 1 1 auto;
	overflow: hidden;
}
```

###### 2.4  inherit 属性不生效

```markdown
 避免在ie中使用该属性
```

###### 2.5  父容器中 flex-direction:column 和 align-items:center 同时存在溢出内容

  问题：父容器中flex-direction:column 和 align-items:center，这俩属性同时存在， 子容器内容过多会溢出内容；

  原因： IE中flex-shrink 的默认值为 0，既空间不足，项目不缩小，就算设置flex-shrink:1;，因为上述两个属性同时存在，IE 依旧固执地不缩小这个项目

  解决方法：给子项目加max-width:100%;或取消其中一个，并把flex-shrink设置为1

###### 2.6 flex 兼容布局下 min-height 不生效

原因：在IE11中，如果将min-height应用在一个flex容器中，它将只对非flex项目（子元素）起作用，而不会对flex项目起作用；这是因为IE11不支持min-height与flex容器中的flex-basis和flex-grow同时使用。

> 仅提供解决思路，灵活应用

解决思路二：设置min-height的子元素为非flex项目

解决思路二：可以使用IE11支持的旧版flexbox属性，即-ms-flexbox；可以将min-height属性应用于flex容器，而不会影响其子元素。

```
.container {
  display: -ms-flexbox; /* IE11 flexbox */
  display: flex; /* Standard flexbox */
  -ms-flex-direction: column; /* IE11 flexbox */
  flex-direction: column; /* Standard flexbox */
  min-height: 200px; /* Minimum height for the flex container */
}

.item {
  -ms-flex: 1 1 auto; /* IE11 flexbox */
  flex: 1 1 auto; /* Standard flexbox */
}
```
