html - 最近更新后的 Firefox 打印问题
问题描述
在最近的 Firefox 更新后，我无法正确打印网页。
本质上，Firefox 会在某个时间点后切断页面，而当您实际打印时，情况会更糟；意味着打印预览与打印结果不匹配（不管它是否只是“保存为 PDF”）。
几个小时以来，我一直试图弄清楚这一点，但似乎无法理解 Mozilla 在其浏览器的打印引擎中最近发布的版本中引入了哪些变化。基于 Chromium 的浏览器工作得很好。
在这一点上，我不确定是否应该报告错误，主要是因为我对 CSS 没有很好的把握，无法确定这是否是浏览器问题。好几年了，现在不行了。
这是页面结构，然后是一些屏幕截图：
*{ margin: 0; padding: 0;}
.header{
font-size: 2.5em;
font-weight: lighter;
color:#333;
border-bottom:3px solid #0a74d2;
position:fixed;
width:100%;
background-color:white;
height:60px;
z-index:10px;
display:block;
}
.header .body{
margin-left:auto;
margin-right:auto;
width:980px;
}
.header .title{
width:50%;
display:inline-block;
float:left;
}
.header .buttons{
display:inline-block;
width:50%;
}
.header .buttons ul{
text-decoration:none;
text-align:right;
margin-right:25px;
}
.header ul li{
display:inline;
margin-right:10px;
vertical-align:10px;
text-align:center;
}
.header .buttons button{
font-size:0.4em;
width:40px;
height:40px;
line-height:40px;
border: 1px solid;
border-radius: 50%;
color:#333;
text-align:center;
vertical-align:middle;
text-decoration:none;
cursor:pointer;
background:white;
outline: none;
background-color:White;
}
.header .buttons button:hover{
color:#0a74d2;
background:WHITE;
}
.header .table{
font-size:0.4em;
padding-top:8px;
padding-bottom:8px;
line-height:20px;
border: 1px solid;
border-radius: 100%;
color:#333;
width:40px;
height:40px;
line-height:40px;
text-align:center;
vertical-align:middle;
text-decoration:none;
cursor:pointer;
background:white;
background-color:White;
}
.header .table:hover{
color:#0a74d2;
background:WHITE;
}
.header .table i{
padding-left:11px;
padding-right:11px;
}
.print_header{
font-size: 3.2em;
font-weight: lighter;
color:rgba(0,0,0,0.8);
border-bottom:1px solid #999;
display:none;
}
.space_header{
width:100%;height:75px;
}
.DivBody{
margin-left:auto;
margin-right:auto;
width:980px;
z-index:-1px;
display:block;
}
.DivContainer{
width:100%;
}
.DivContainer .title{
width:100%;
font-size: 1.8em;
font-weight: lighter;
color:#333;
}
.DivContainer .SubContainer{
width:100%;
border-top:3px solid #cbcbcb;
}
.row{
width:100%;
}
.row .title{
font-weight:semi-bold;
font-size: 1.20em;
color:#333;
display:inline-block;
width:198px;
text-align:right;
}
.row .units{
font-weight:semi-bold;
font-size: 0.8em;
color:#333;
display:inline-block;
text-align:right;
}
.row .left{
width:50%;
display:inline-block;
}
.row .right{
width:50%;
display:inline-block;
float:right;
}
.row input{
background-color:#fff;
border: 1px solid #808080;
width:217px;
height:28px;
margin-top:10px;
padding-left:3px;
font-weight:normal;
font-size: 1.20em;
color:rgba(0,0,0,0.8);
}
.row .ReadOnly{
outline: none !important;
border: 1px solid #cbcbcb;
box-shadow: 0 0 1px #cbcbcb;
background-color:#f0f0f0;
color:#222;
}
.row .MoreThan300{
outline: none !important;
border: 1px solid #E51400;
box-shadow: 0 0 1px #E51400;
background-color:#FFBABA;
color:#222;
}
.row select{
background-color:#fff;
border: 1px solid #808080;
width:219px;
height:30px;
margin-top:10px;
font-weight:normal;
font-size: 1.20em;
color:rgba(0,0,0,0.8);
cursor:pointer;
}
.row select:focus{
outline: none !important;
border: 1px solid #0a74d2;
box-shadow: 0 0 1px #0a74d2;
}
.ContainerMLS{
background-color:#fff;
width:49%;
float:left;
height:300px;
margin-top:20px;
}
.subsubtitleMLS{
border-bottom:3px solid #d0d0d0;
padding-left:7px;
font-weight:semi-bold;
font-size: 1.20em;
color:#333;
}
.ContainerMLS .SubContainerMLS{
padding-top:10px;
width:100%;
}
.ContainerMLS table{
border-collapse:collapse;
}
.ContainerMLS .Title{
border-top:none;
border-left:none;
border-right:1px solid #D3D3D3;
border-bottom:2px solid #D3D3D3;
padding-top:5px;
padding-left:10px;
font-weight:semi-bold;
font-size: 1.20em;
color:#333;
}
.ContainerMLS .result{
border-bottom:2px solid #e5e5e5;
color:#222;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
font-weight:normal;
font-size: 1.20em;
}
table{
border-collapse:collapse;
border:none;
font-size:15px;
}
table tr td{
width:100px;
border:none;
}
table .header_td{
border: 1px solid black;
text-align:center;
background-color:RGB(242,242,242);
font-weight:bold;
color:RGB(63,63,63);
}
table .values{
border: 1px solid gray;
font-weight:normal;
text-align:right;
padding-right:5px;
}<html>
<head>
</head>
<body>
<form>
<div class="DivBody">
<div class="DivContainer" style="height:150px;">
<div class="title"><p>Lg</p></div>
<div class="SubContainer">
<div class="row">
<div class="left">
<p class="title">LV</p>
<input type="text" value="123" tabindex="1">
<p class="units">un</p>
</div>
<div class="right">
<p class="title">PS</p>
<select tabindex="2">
<option>1</option>
</select>
</div>
</div>
<div class="row">
<div class="left">
<p class="title">LAP</p>
<input type="text" class="ReadOnly" readonly="">
<p class="units">un</p>
</div>
<div class="right">
<p class="title">GD</p>
<select tabindex="3">
<option>1</option>
</select>
<p class="units">un</p>
</div>
</div>
</div>
</div>
<div class="DivContainer" style="height:150px;">
<div class="title"><p>ALHT</p></div>
<div class="SubContainer" style="height:120px;">
<div class="row">
<div class="left">
<p class="title">AV</p>
<input type="text" value="" tabindex="4">
<p class="units">un</p>
</div>
<div class="right">
<p class="title">POS</p>
<select tabindex="5">
<option>1</option>
</select>
</div>
</div>
<div class="row">
<div class="left">
<p class="title">APW</p>
<input type="text" class="ReadOnly" readonly="">
<p class="units">un</p>
</div>
<div class="right"></div>
</div>
</div>
</div>
<div class="DivContainer" style="height:110px;">
<div class="title"><p>LM</p></div>
<div class="SubContainer" style="height:60px;">
<div class="row">
<div class="left">
<p class="title">TLA</p>
<select tabindex="6">
<option>1</option>
</select>
</div>
<div class="right">
<p class="title">PLA</p>
<input type="text" tabindex="7">
<p class="units">un</p>
</div>
</div>
</div>
</div>
<div class="DivContainer" style="height:110px;">
<div class="title"><p>TB</p></div>
<div class="SubContainer" style="height:60px;">
<div class="row">
<div class="left">
<p class="title">TTB</p>
<select class="SelRes" tabindex="9">
<option>0</option>
</select>
<p class="units">un</p>
</div>
<div class="right">
<p class="title">WDT</p>
<input type="text" class="ReadOnly" readonly="">
<p class="units">un</p>
</div>
</div>
</div>
</div>
<div class="DivContainer" style="height:110px;">
<div class="title"><p>TM</p></div>
<div class="SubContainer" style="height:60px;">
<div class="row">
<div class="left">
<p class="title">NTM</p>
<input type="text" class="ReadOnly" readonly="">
</div>
<div class="right">
<p class="title">TTMB</p>
<input type="text" class="ReadOnly" readonly="">
<p class="units">un</p>
</div>
</div>
</div>
</div>
<div class="DivContainer" style="height:110px;">
<div class="title"><p>PG</p></div>
<div class="SubContainer">
<div class="row">
<div class="left">
<p class="title">WNP</p>
<input type="text" class="ReadOnly" readonly="">
<p class="units">un</p>
</div>
<div class="right">
<p class="title">WWP</p>
<input type="text" class="ReadOnly" readonly="">
<p class="units">un</p>
</div>
</div>
</div>
</div>
<div class="DivContainer" style="height:110px;">
<div class="title"><p>ML</p></div>
<div class="SubContainer" style="height:60px;">
<div class="row">
<div class="left">
<p class="title">CML</p>
<input type="text" class="ReadOnly" readonly="">
<p class="units">un</p>
</div>
<div class="right">
<p class="title">TRN</p>
<input type="text" class="ReadOnly" readonly="">
</div>
</div>
</div>
</div>
<div class="ContainerMLS">
<p class="subsubtitleMLS">Tbl 1</p>
<div class="SubContainerMLS">
<table style="width:100%;">
<tbody><tr>
<td class="title">NM</td>
<td class="title">TP</td>
<td class="title">LM</td>
<td class="title" style="border-right:none;">PF</td>
</tr>
<tr style="visibility: visible;">
<td class="result">6<span style="font-size:0.8em;">x</span></td>
<td class="result">40x1,0</td>
<td class="result">13<span style="font-size:0.8em;"> un</span></td>
<td class="result">1.49<span style="font-size:0.8em;"> un</span></td>
</tr>
<tr style="visibility: visible;">
<td class="result">2<span style="font-size:0.8em;">x</span></td>
<td class="result">40x1,0</td>
<td class="result">13<span style="font-size:0.8em;"> un</span></td>
<td class="result">0.50<span style="font-size:0.8em;"> un</span></td>
</tr>
<tr style="visibility: visible;">
<td class="result">2<span style="font-size:0.8em;">x</span></td>
<td class="result">40x1,0</td>
<td class="result">13<span style="font-size:0.8em;"> un</span></td>
<td class="result">0.50<span style="font-size:0.8em;"> un</span></td>
</tr>
</tbody></table>
<table style="margin-top:20px; width:100%;">
<tbody>
<tr>
<td class="title">DP</td>
<td class="title" style="border-right:none;">TSP</td>
</tr>
<tr>
<td class="result">130.00<span style="font-size:0.8em;"> un</span></td>
<td class="result">130<span style="font-size:0.8em;"> un</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="ContainerMLS" style="float:right;">
<p class="subsubtitleMLS">Tbl 2</p>
<div class="SubContainerMLS">
<table style="width:100%;">
<tbody>
<tr>
<td class="title">NML</td>
<td class="title">TP</td>
<td class="title">WL</td>
<td class="title" style="border-right:none;">PF</td>
</tr>
<tr style="visibility: visible;">
<td class="result">4<span style="font-size:0.8em;">x</span></td>
<td class="result">40x1,0</td>
<td class="result">13<span style="font-size:0.8em;"> un</span></td>
<td class="result">0.99<span style="font-size:0.8em;"> un</span></td>
</tr>
<tr style="visibility: visible;">
<td class="result">2<span style="font-size:0.8em;">x</span></td>
<td class="result">40x1,0</td>
<td class="result">13<span style="font-size:0.8em;"> un</span></td>
<td class="result">0.50<span style="font-size:0.8em;"> un</span></td>
</tr>
<tr style="visibility: visible;">
<td class="result">2<span style="font-size:0.8em;">x</span></td>
<td class="result">40x1,0</td>
<td class="result">13<span style="font-size:0.8em;"> un</span></td>
<td class="result">0.50<span style="font-size:0.8em;"> un</span></td>
</tr>
</tbody>
</table>
<table style="margin-top:20px; width:100%;">
<tbody>
<tr>
<td class="title">WD</td>
<td class="title" style="border-right:none;">TWS</td>
</tr>
<tr>
<td class="result">104.00<span style="font-size:0.8em;"> un</span></td>
<td class="result">104<span style="font-size:0.8em;"> un</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</form>
</body>
</html>Firefox 中上述代码段的一些屏幕截图（打印）
Firefox 中的正常网页视图
Firefox 中的打印预览（将内容剪切到最后）
Firefox 的“保存为 PDF”（格式甚至与预览不匹配）
解决方案
推荐阅读
- javascript - 如何制作更优雅的实现
- cloud - google cloud Iot / MQTT / pubsub 收发
- javascript - 如何在对象构造函数中将数组声明为对象的属性？
- api - 通过 REST API 查询 MicroStrategy 中的数据
- django - Django：如果存在，如何使用辅助函数来获取模型对象？
- bots - Python AutoGUI 没有点击
- unity3d - UNITY：如何以像素为单位获取线条的宽度？
- python - 无论如何我可以获得img标签的位置吗？在python中使用beautifulsoup查找功能
- html - div中多个孩子的css高度
- sql - 特定组值的平均值