本文介绍了打印页面时，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浏览器有问题吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！