打印页面时，Firefox和Chrome浏览器有问题吗？-前端问题

problem with browsers Firefox and Chrome when printing a page?(打印页面时，Firefox和Chrome浏览器有问题吗？)

本文介绍了打印页面时，Firefox和Chrome浏览器有问题吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到过Firefox&；Chrome这样的浏览器的奇怪行为，当我想要打印具有固定高度的表格的页面500px时，浏览器有时会完全删除高度(Chrome)，有时会保留高度但删除边框(Firefox)！

html,body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 1rem;
}
main{
    margin: 10px;
    padding: 10px;
}
table{
    border-collapse: collapse !important;
    border: 1px solid !important;
    width: 100%;
}
tr,th,td{
    border: 1px solid !important;
    padding: 3px;
}
.minHeight{
    height: 500px !important;
}
@media print {
    table {
        border: 1px solid !important;
    }
    th, td {
        border: 1px solid !important;
    }
    
    .minHeight{
        height: 500px !important;
    }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <main>
      <table>
        <thead>
          <tr>
            <th>Code Article</th>
            <th>Code TVA</th>
            <th>Remise</th>
          </tr>
        </thead>
        <tbody class="minHeight">
          <tr>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </main>
  </body>
</html>

有人知道为什么会发生这种情况吗？

推荐答案

是的，我解决了！在挣扎了大约两个小时后，我发现了两个很好的技巧，一个是用来修复Chrome中的问题：或者只是将高度指定为<tbody class="minHeight" style="height: 720px">

table {
    display: table;
    table-layout: fixed;
}
td {
    display: table-cell;
}

关于Firefox我发现它是一个bug我通过给table属性cellspacing="0"和CSS样式border-collapse:initial;

来解决它

这篇关于打印页面时，Firefox和Chrome浏览器有问题吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！