HTML 문서를 인쇄 된 것처럼 화면에 표시합니다.

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>

답변

Chrome 브라우저를 사용하면 Dev Tools에서 다른 미디어를 에뮬레이션 할 수 있습니다 (더 많은 도구 – & gt; 렌더링 설정).

답변