HTML电子邮件- Outlook在图像左侧和顶部添加1 px填充(PNG /背景色)

我尝试在背景色上放置一个透明的PNG *，这样我就可以制作一系列电子邮件，而只需更改背景色。Outlook**正在向图像的左侧和顶部添加1px的填充/边距，以允许背景色显示出来。
1px green lines left / top of white boxes
我如何摆脱填充，使图像是对边缘齐平？

JPG也是如此。
- 我不知道我的Outlook是什么版本。它是"桌面版"，而不是"移动版"。下面是它的规格：Microsoft® Outlook®适用于Microsoft 365 MSO（版本2210内部版本号16.0.15726.20070）64位

代码：

<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Untitled</title>

    <!--[if gte mso 9]>
    <xml>
    <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->

    <style type="text/css">

    html,  body {margin: 0 !important; padding: 0 !important; height: 100% !important; width: 100% !important;}

    * {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}

    .ExternalClass {width: 100%;}

    div[style*="margin: 16px 0"] {margin: 0 !important;}

    table,  td {mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important;}

    table {border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; margin: 0 auto !important;}
    table table table {table-layout: auto;}

    img {-ms-interpolation-mode: bicubic;}

    .yshortcuts a {border-bottom: none !important;}

    a[x-apple-data-detectors] {color: inherit !important;}
    </style>

    <style type="text/css">

        @media screen and (max-width: 600px) {

            .email-container {width: 100% !important;}
            .fluid, .fluid-centered {max-width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important;}
            .fluid-centered {margin-left: auto !important; margin-right: auto !important;}
            .stack-column, .stack-column-center {display: block !important; width: 100% !important; max-width: 100% !important; direction: ltr !important;}
            .stack-column-center {text-align: center !important;}
        
            .center-on-narrow {text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; float: none !important;}
            table.center-on-narrow {display: inline-block !important;}}

    </style>

    </head>

    <body bgcolor="#FFFFFF" width="100%" style="margin: 0px;" yahoo="yahoo">
    <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" style="border-collapse: collapse; border: 0px;">
      <tr>
        <td><center style="width: 100%;">
            
            <!-- Visually Hidden Preheader Text : BEGIN -->
            <div style="display: none; mso-hide: all; overflow: hidden; opacity: 0; max-width: 0px; max-height: 0px; font-family: sans-serif; font-size: 1px; line-height: 1px; mso-height-rule: exactly; color: #FFFFFF;">Untitled</div>
            <!-- Visually Hidden Preheader Text : END --> 

            <!-- Email : BEGIN -->
            <!-- Outer -->
            <table class="email-container" align="center" cellpadding="0" cellspacing="0" border="0" style="width: 600px; height: auto; border-collapse: collapse; border: 0px;">
            <tr>
                <td bgcolor="#767676" style="padding: 10px; border: 1px solid #000000;">

            <!-- Inner -->
                <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" style="border-collapse: collapse; border: 0px;">
                  <tbody>
                    <tr>
                      <td bgcolor="#00A261" style="line-height: 10px; mso-height-rule: exactly;"><img src="https://417ee9fcaff7638b6579-b73cd9e67178543aeffbc83afe346fc4.ssl.cf1.rackcdn.com/CP-2021/14067552-1.jpg" alt="image" style="width: 350px; height: auto; display: block; outline: none; border: 0; margin: 0;"/></td></tr>
                    <tr>
                      <td bgcolor="#00A261" style="line-height: 10px; mso-height-rule: exactly;"><img src="https://417ee9fcaff7638b6579-b73cd9e67178543aeffbc83afe346fc4.ssl.cf1.rackcdn.com/CP-2021/14067552-1.jpg" alt="image" style="width: 350px; height: auto; display: block; outline: none; border: 0; margin: 0;"/></td></tr>
                    <tr>
                      <td>&nbsp;</td></tr>
                    <tr>
                      <td>style="display:block; height:auto; outline:none; border:0; margin: 0; text-decoration:none; font-family: 'Campton', arial, sans-serif; font-size:20px; line-height:1.5; color:blue; text-align:center; margin:0;"</td></tr>
                    <tr>
                      <td>&nbsp;</td></tr>
                    <tr>
                      <td>&nbsp;</td></tr>
                    <tr>
                      <td>&nbsp;</td></tr>
                    <tr>
                      <td>&nbsp;</td></tr>
                    <tr>
                      <td>&nbsp;</td></tr>
                    <tr>
                      <td>&nbsp;</td></tr></tbody></table>
            <!-- Inner : END -->

                </td></tr></table></center></td></tr></table></body></html>

我什么都试过了!奇怪的是，这些1px的线看起来就像邮件到达时下载图片之前"下载图片"图标周围的灰线。
还有。在Acid上的电子邮件中运行了这个。这些行没有显示在任何渲染图上。（至少，我没有看到。）

HTML电子邮件- Outlook在图像左侧和顶部添加1 px填充(PNG /背景色)

1条答案

相关问题

热门标签

最新问答