Ich habe eine E-Mail im HTML-Format. Irgendwie wird beim Drucken viel Leerzeichen oben angezeigt, bevor der eigentliche Text beginnt. Auf dem Bildschirm ist das nicht so.
Gibt es eine Möglichkeit, meinem Browser mitzuteilen, dass die Datei auf dem Bildschirm so angezeigt werden soll, als ob sie gedruckt worden wäre? Oder wie können Sie überprüfen, welche Stilmethoden beim Drucken angewendet werden, die nicht auf den Bildschirm angewendet werden?
Hier ist ein Teil des Codes, der dieses Problem für mich darstellt:
<!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>
