Tengo un correo electrónico en formato html. De alguna manera, cuando se imprime muestra una gran cantidad de espacio en blanco en la parte superior antes de que comience el texto real. En la pantalla no es así.
¿Hay alguna manera de decirle a mi navegador que muestre el archivo en la pantalla como si estuviera impreso? ¿O alguna forma de verificar qué métodos de estilo se aplican al imprimir que no se aplican en la pantalla?
Aquí hay algunos de los códigos que me presentan 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>
