vue中使用渐变色失效，打包之后渐变色失效的问题，elementui 表格样式错位bug

原创于 2019-01-29 23:22:54 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #web前端

本文详细介绍了在Vue项目中遇到的渐变色失效问题及ElementUI表格单元格错位的解决方案。对于渐变色失效，通过在CSS中添加不同浏览器前缀的gradient属性解决；对于表格错位，通过修改CSS样式使表格单元格正确显示。

1.项目使用的vue，在里面写了渐变色，打包之后渐变色失效。

解决方法，webkit内核前后加上这段代码

    /*! autoprefixer: off */
    background: -webkit-linear-gradient(top, #6f9fe7 0%, #3e4dda 100%) ;
    /* autoprefixer: on */
    background:-moz-linear-gradient(top, #6f9fe7 0%, #3e4dda 100%);
    background:-o-linear-gradient(top, #6f9fe7 0%, #3e4dda 100%);
    background:linear-gradient(top, #6f9fe7 0%, #3e4dda 100%);

2.element UI表格单元格偶尔会出现错位的问题，解决方法：

.el-table th.gutter{
    display: table-cell!important;
}

.el-table colgroup.gutter{
    display: table-cell!important;
}