O navegador Chrome permite emular outras mídias no Dev Tools (mais ferramentas - configurações de renderização >).
Eu tenho um email em formato html. De alguma forma, quando ele é impresso, ele mostra muito espaço em branco no topo antes que o texto real comece. Na tela não é assim.
Existe uma maneira de dizer ao meu navegador para exibir o arquivo na tela como se fosse impresso? Ou alguma maneira de verificar quais métodos de estilo se aplicam na impressão que não se aplicam na tela?
Veja alguns dos códigos que me apresentam este problema:
<!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>
O navegador Chrome permite emular outras mídias no Dev Tools (mais ferramentas - configurações de renderização >).