打印页面时,Firefox和Chrome浏览器有问题吗?

本教程将介绍打印页面时,Firefox和Chrome浏览器有问题吗?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

打印页面时,Firefox和Chrome浏览器有问题吗? 教程 第1张

问题描述

我遇到过这样的浏览器的奇怪行为,当我想要打印具有固定高度的表格的页面时,浏览器有时会完全删除高度(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>

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

推荐答案

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

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

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

来解决它

好了关于打印页面时,Firefox和Chrome浏览器有问题吗?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。