美文网首页坚持学习打卡
vue项目中table火狐浏览器打印样式表格框线丢失

vue项目中table火狐浏览器打印样式表格框线丢失

作者: Moment929 | 来源:发表于2023-03-23 15:23 被阅读0次

    还需要对表格重置下双边框问题
    table {
    border-spacing: 0; // 设置相邻单元格的边框间的距离 (仅用于“边框分离”模式)
    border-collapse: unset; (collapse/separate)
    border: 1px solid #000;
    }
    collapse 相邻的单元格共用同一条边框 (此属性火狐不兼容)
    separate 每个单元格拥有独立的边框
    这样在打印预览中,就可以发现边框线出来了

    需要把 border-collapse:collapse; 改为border-collapse: unset;

    浏览器兼容CSS 样式浏览器前缀兼容性写法、生效写法:
    -moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 */

    -webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */

    -o- /* Opera浏览器(早期) */

    -ms- /*IE浏览器 */

    所以最后兼容浏览器的写法

    .confluenceTable{border-collapse:collapse;-moz-border-collapse:unset;}

    相关文章

      网友评论

        本文标题:vue项目中table火狐浏览器打印样式表格框线丢失

        本文链接:https://www.haomeiwen.com/subject/cppirdtx.html