问题
使用element-ui table表格布局，头尾列fiexd时，在chrome，火狐，edg浏览器上布局正常，但是在国产浏览器,qq浏览器，UC浏览器，360浏览器上布局错乱。
在这里插入图片描述
原因
因为chrome正常，所以怀疑是国产浏览器的chrome内核版本问题，就查看了一下，qq浏览器是70，uc浏览器55，360是65，而edg浏览器和chrome浏览器内核版本均是92。造成的直接原因其实已经找到了，就是国产浏览器chrome内核版本低，而element-ui在低版本chrome内核上没有做兼容。
解决
直接原因知道了，但是怎么解决？习惯性百度了一下，果然有很多网友也遇到同样的问题，提供的方案也多种，其中说的最多的是调用element-ui table组件的doLayout方法，重新刷新布局。然并软，试了网友的多种方法均无效！
那只能尝试另辟蹊径。
于是查看了其他页面，发现项目里面的用户列表页面同样有换行，但是没有错乱。
既然有不一致，那就对比两个页面，发现其实没多大差异，所以智能来笨办法。将有问题的列表的el-table-column注释，看页面反应。首先将使用了 <template slot-scope="scope">的el-table-column注释，结果返现，当吧含有组件file-view-list （一个文件预览组件） 的el-table-column注释后，页面竟然正常了！！
在这里插入图片描述
那就是file-view-list组件有问题，于是找到file-view-list组件里面，注释里面的样式，后面终于找到了影响页面布局的css，竟然是一个多行省略样式，scss的混合。
//多行省略
@mixin textMultiLineEllipsis($clamp:1){
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $clamp;
-webkit-box-orient: vertical;
}
具体为何影响的深层次原因目前尚不清楚，但是后面换了种写法就好了，换成单行省略的写法
//省略号
@mixin textEllipsis ($width) {
max-width: $width;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
不过深层次原因还没有找到。
