我有一封 html 格式的电子邮件。不知何故，打印时在实际文本开始之前会在顶部显示大量空白。在屏幕上不是这样的。
有没有办法让我的浏览器将文件像打印文件一样显示在屏幕上？或者有什么方法可以检查打印时适用但不显示在屏幕上的样式方法？
以下是向我展示此问题的一些代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if !mso]><!-- --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
<style>
html, body {
margin: 0;
padding: 0;
}
* {
outline: none;
}
a {
cursor: pointer;
}
@media print {
* {
background-color: white !important;
color: black !important;
}
}
</style>
</head>
<body bgcolor="#ffffff" style="width: 100%; margin: 0;">
<div style="display: none; font-size: 1px; color: #333333; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">Preview Text</div>
<table style="border-collapse: collapse; width: 100%;" align="center" bgcolor="#0568a6" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; max-width: 600px; margin: 0 auto; padding: 4px; color: #eeeeee;">
<table style="border-collapse: collapse; color: #eeeeee; width: 100%;" bgcolor="#0568A6"><!--[if mso]>
<table align="center" bgcolor="#0568A6" width="600" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td align="left" valign="bottom" width="75.5%"> </td>
<td style="float: right;" valign="top" width="24%"><img src="logo.jpg" alt="" style="float: right;" title="" align="right" border="0" width="154" height="33"></td>
</tr>
</tbody>
</table>
<!--[if mso]>
</table>
<![endif]--></div>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%; border-collapse: collapse;" align="center" bgcolor="#ffffff" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; max-width: 600px; margin: 0 auto; padding: 0px 0px 0px 4px; color: #111111;">
<table style="border-collapse: collapse; width: 100%;" bgcolor="#ffffff"><!--[if mso]>
<table align="center" bgcolor="#ffffff" width="600" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 18px 0px 4px 0px; width: 100%; max-width: 600px;" valign="top">
<p style="font-family: Arial, sans-serif; margin-bottom: 15px; font-weight: normal; font-size: 12pt; line-height: 1.25;">Hi Joe,</p>
<p style="font-family: Arial, sans-serif; margin-bottom: 15px; font-weight: normal; font-size: 12pt; line-height: 1.25;">More text ...</p>
... removed stuff ...
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</table>
<![endif]--></div>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100%;" align="center" bgcolor="#efefef" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; max-width: 600px; margin: 0 auto; padding: 18px 0px 18px 4px;">
<table style="border-collapse: collapse; width: 100%;" bgcolor="#efefef"><!--[if mso]>
<table align="center" bgcolor="#efefef" width="600" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 600px;">
<p style="font-size: 9pt; color: #999999; font-family: Verdana, 'Tahoma', sans-serif; line-height: 120%; letter-spacing: 1px;">Footer</p>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</table>
<![endif]--></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
答案1
Chrome 浏览器允许在开发工具中模拟其他媒体（更多工具 -> 渲染设置）。
