打印页面时,Firefox和Chrome浏览器有问题吗?
本教程将介绍打印页面时,Firefox和Chrome浏览器有问题吗?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。
问题描述
我遇到过这样的浏览器的奇怪行为,当我想要打印具有固定高度的表格的页面时,浏览器有时会完全删除高度(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浏览器有问题吗?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。