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

原创

于 2020-11-25 20:25:57 发布 · 3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

代码如下:

      <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,加入后则可正常显示;