Outlook 电子邮件引擎正在添加额外的填充

问题描述 投票：0回答：1

我正在尝试创建一个 html 电子邮件模板，该模板在几乎所有客户端（除了 Outlook 桌面）中都可以正常工作。 我尝试了与此相关的大部分线程解决方案，但我无法找到确切的问题。

<body  width="100%" style="margin: 0; line-height: 1.4; font:normal 10pt Open Sans; background:#e0e0e0;">
    <table align="center" style="border-collapse: separate;">
      <tr>
         <td>
          <table style="padding:25px; background:#ffffff; width:800">     
            <tr>
                <td  style="color:#000000; font-size:29px; font-weight:400; text-align:center">
                email header
                </td>
            </tr>   
            <tr>
                <td  style="border: solid 5px #ffffff"></td> 
            </tr>
            <tr>
               <td > message <a href="${wacUrl}" style="color:#5F259F; font-weight:500;font-weight:bold;" target="_blank"> hyperlink to website </a>.
</td>

            </tr>
            <tr>
                <td  style="border: solid 5px #ffffff"></td> 
            </tr>
            <tr>
                <td  style="font-weight:bold;" >order header </td>
            </tr>
           </table>
          </td> 
      </tr>
    </table>
<body>

这在除 Outlook 桌面之外的所有客户端中都可以正常工作，它添加了额外的填充，以一行为例

    <tr>
      <td style='padding:18.75pt 18.75pt 18.75pt 18.75pt'>
          <p class=MsoNormal>
              <b>
                  <span style='color:black'>Order header
                  </span>
              </b>
              <b>
                  <o:p>
                  </o:p>
              </b>
          </p>
      </td>
 </tr>
outlook html-email padding
1个回答
0
投票

立即想到几种可能性：

  • 元素的边距
  • 元素上的填充
  • 元素的行高

为了确认导致此问题的原因，我更改了 Outlook 中的背景颜色和边框颜色以查看发生了什么情况，并包含下面发生的情况的屏幕截图供您参考。

修复

根据我在这里看到的内容，我认为将 

padding:25px;
放入内容表的内联样式中会导致表中的所有单元格具有 25px 的默认填充。因此，我将表格的内边距、背景和宽度移至包含内容表格的单元格，以解决此问题。

这是更新后的代码，其中包含 Outlook 石蕊预览中结果的屏幕截图：

<body width="100%" style="margin: 0; line-height: 1.4; font:normal 10pt Open Sans; background:#e0e0e0;">
    <table align="center" style="border-collapse: separate;">
        <tr>
            <td style="background:#ffffff; padding:25px; width:800;">
                <table>
                    <tr>
                        <td style="color:#000000; font-size:29px; font-weight:400; text-align:center">
                        email header
                        </td>
                    </tr>
                    <tr>
                        <td style="border: solid 5px #ffffff"></td> 
                    </tr>
                    <tr>
                        <td>
                        message <a href="${wacUrl}" style="color:#5F259F; font-weight:500;font-weight:bold;"  target="_blank"> hyperlink to website </a>.
                        </td>
                    </tr>
                    <tr>
                        <td style="border: solid 5px #ffffff"></td> 
                    </tr>
                    <tr>
                        <td style="font-weight:bold;" >order header </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
<body>

Outlook litmus 预览中固定代码的屏幕截图

参考截图

以下是 litmus 中 Web 预览与 Outlook 预览的结果截图，供您参考：

网络浏览器 前景试金石

在单元格中包含内容的表格上删除单元格填充和单元格间距并将边框设置为 0 后：

网络浏览器 前景试金石

删除具有单元格内容的表格上的

padding:25px;
后，这就是我得到的：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.