Question

我似乎无法阻止我在Outlook中使用HTML简报模板。

它在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标签而不是跨度，从float：left更改为align：left。添加明确的宽度等但似乎无法弄明白。

Answer 1

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

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

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

Answer 2

Gortonington答案是正确的，另一件事，不要使用float：在最后一个td左边，事实上你不需要跨度只是将样式直接放在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>

span 2013中的文本在Outlook 2013中打破HTML

2 个答案: