跨度标记中的文本在 Outlook 2013 中中断 HTML

Question

我似乎无法阻止我的 HTML 时事通讯模板在 Outlook 中崩溃。

它在 Gmail 和 iOS/Apple 应用程序中工作正常，但 outlook 对它的解释不同并迫使元素中断。

我遇到特殊问题的代码位于邮件的顶部，我很确定是这部分导致中断；

<tr>
        <td colspan="2" style="background-color:#DFDFDF;" bgcolor="#DFDFDF">
            <img style="display:block;" src="http://www.mediablanketmail.com/email/xxxx.jpg" width="38" height="35" alt="&#10004"></td>
        <td colspan="2" style="background-color:#DFDFDF;" bgcolor="#DFDFDF">
            <span style="align: left; font-size:11px;">We search the market for you</span></td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#DFDFDF;" bgcolor="#DFDFDF">
            <img style="display:block;" src="http://www.mediablanketmail.com/email/xxxx.jpg" width="38" height="34" alt="&#10004"></td>
        <td colspan="2" style="background-color:#DFDFDF;" bgcolor="#DFDFDF">
            <span style="align: left; font-size:11px;">No hidden costs</span></td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#DFDFDF;" bgcolor="#DFDFDF">
            <img style="display:block;" src="http://www.mediablanketmail.com/email/xxxx.jpg" width="38" height="34" alt="&#10004"></td>
        <td colspan="2" style="background-color:#DFDFDF;" bgcolor="#DFDFDF">
            <span style="float: left; font-size:11px;">Fill in one simple form</span></td>
    </tr>

我已尝试对代码进行各种更改 - 使用 p 标记代替 span，从 float: left 更改为 align: left。添加显式宽度等。但似乎无法弄清楚。

Answer 1

我认为问题在于每个 TD 上都有 colspan="2"，但每行只有 2 列。因此 Outlook 正在为每一行创建一个新行以遵循 html 属性。

其他电子邮件客户端预处理器能够解析代码并修复问题以按预期显示它，但 Outlook 将优先级放在满足 colspan 属性上，这导致每个 TD 实质上获得自己的行.

如果您要删除 colspan="2" 属性，我相信它应该可以正常工作。此外，在这种情况下，您甚至不需要 span 标签。您可以将字体大小和对齐属性放在 TD 上（这实际上在客户端之间更加稳定）。

Answer 2

Gortonington 的回答是正确的，另一件事，不要在最后一个 td 上使用 float: left，事实上你不需要跨度，只需将样式直接放在 tds 上，并使用 align="left"。并在图片上添加 border="0"，如果你想在图片上添加链接。

<tr>
  <td style="background-color:#DFDFDF;" bgcolor="#DFDFDF"><img border="0" style="display:block;" src="http://www.mediablanketmail.com/email/xxxx.jpg" width="38" height="35" alt="&#10004"></td>
  <td align="left" style="background-color:#DFDFDF;font-size:11px;" bgcolor="#DFDFDF"> We search the market for you</td>
</tr>
<tr>
  <td style="background-color:#DFDFDF;" bgcolor="#DFDFDF"><img border="0" style="display:block;" src="http://www.mediablanketmail.com/email/xxxx.jpg" width="38" height="34" alt="&#10004"></td>
  <td align="left" style="background-color:#DFDFDF;font-size:11px;" bgcolor="#DFDFDF"> No hidden costs</td>
</tr>
<tr>
  <td style="background-color:#DFDFDF;" bgcolor="#DFDFDF"><img border="0" style="display:block;" src="http://www.mediablanketmail.com/email/xxxx.jpg" width="38" height="34" alt="&#10004"></td>
  <td align="left" style="background-color:#DFDFDF;font-size:11px;" bgcolor="#DFDFDF"> Fill in one simple form</td>
</tr>

跨度标记中的文本在 Outlook 2013 中中断 HTML

Text in span tags breaking HTML in Outlook 2013

html

outlook

html-email