elementUI兼容ie浏览器问题（笔记）

initial 关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。但是IE 不支持该关键字。我们只能在子元素中继续写相同的css来兼容ie，不然样式会出问题。
案例：
在使用elementui的对话框时，经常会把标题居中显示（如下图）

打开ie控制台会看到

text-align样式报错，这是因为IE 不支持initial关键字导致的，所以修改下text-align: left 就容兼容ie浏览器。

表单布局

我得习惯表单布局使用左右双列，一边12的栅格布局，代码类似下面这样

<el-row :gutter="20">
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="12" ><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12" ><div class="grid-content bg-purple"></div></el-col>
</el-row>

这样的布局在谷歌浏览器是没问题的，毕竟最标准的浏览器，但是到ie浏览器就会存在个别换行的问题，像这样：
原因：在ie浏览器里表单个别的高度会比正常的多出一点，如下图“

正常的高度是36px，而出问题的高度是37px所以就被挤了下去
**解决办法：**我刚开始是在问题的表单同行没问题的表单的高度设置成37，这样两边一样高就不会换行了，但是这样不保险，其他的还会出问题。后面我就直接在栅格布局里使用div标签，左右分栏，如下：

<el-row>
        <el-col :span="12">
          <div>
            <el-form-item label="邮政编码"></el-form-item>
            <el-form-item label="参加工作时间"></el-form-item>
          </div>
        </el-col>
        <el-col span="12">
          <div>
            <el-form-item label="传真" prop></el-form-item>
            <el-form-item label="职务" prop></el-form-item>
          </div>
        </el-col>
      </el-row>

好像这个div可以删掉，但是我懒得动了，能用就是好代码就可以留着，哈哈哈，这样问题就解决了。
未完，待补充更新

FormData对象

官方文档： FormData()构造函数

从文档上可以看出对象共有9个方法，但是你点进去会发现只有一个append方法支持ie浏览器的，其余的都不支持ie浏览器。就像这样：

所以看法的时候会发现在谷歌浏览器上好好的，但是在测试环境ie浏览器上会有问题，控制台报错：xx对象不支持get、set等等。

解决办法：自己设置一个对象，一个属性放formData,其余属性放其他信息：

const form = {
	formdata,
	name,
	url
	...
}

弹窗遮罩处于最上层

现象如下截图

尝试性修改：
在弹窗组件里加上这两句配置：

 :modal-append-to-body="false"
 append-to-body

官方文档对这两个属性的解释：

至于有没效果等我测试了下