Element-ui el-form中label-width=“auto“ 在IE内核浏览器下显示异常问题

代码如下:

      <el-form
        ref="form"
        label-width="auto"
        :model="form"
        size="small"
        :rules="rules"
      >

问题: 在label-width设置为"auto"后,IE内核浏览器及其他浏览器(常用)显示问题如图:
正常(谷歌等浏览器):

异常(IE、QQ、360等):

经过源码分析,auto原理是先通过计算出左侧dom元素宽度,右侧margin-left设置为计算出的width.
但ie浏览器margin-left计算后少了左侧的padding-right的宽度,具体如下图所示:
异常:

正常:

通过对比分析,在ie浏览器下未加上padding-right,加入后则可正常显示;

解决办法,将左侧的padding修改为0, 右侧部分加入padding-left, 进行样式覆盖,具体代码如图:

  .el-form {
    .el-form-item {
      .el-form-item__label-wrap {
        .el-form-item__label {
          padding: 0; //这里是左侧,覆盖padding
        }
      }
      .el-form-item__content {
        // el-form-item__label中padding-right修改为0，el-form-item__content中padding-left修改，
        // 解决label-width=auto在ie浏览器内核下auto失败的问题
        padding: 0 0 0 30px;
      }
      .el-form-item__error {
        padding: 0 0 0 30px; //配合 el-form-item__content修改padding, 这里是错误提示信息,也应加入padding
      }
    }
  }

此问题完美解决(后续发现问题会继续更新).